您的位置：首页 > Web前端 > AngularJS

AngularJs实战（四）

2015-12-13 11:13 661 查看

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
}])

myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'@'  //@：把当前属性的值进行传递，传递的是字符串
},
template:"<div>{{flavor}}</div>" //取出独立作用域中的值
// ,
// link:function(scope,element,attrs){
//  scope.flavor=attrs.flavor; //取出自定义属性的值
// }
}
});

//页而中使用：
<body>
<div ng-controller="MyCtrl">
<drink flavor="{{ctrlFlavor}}"></drink>
</div>
</body>

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
}])

// 指令与控制器之间实现双向绑定
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'=' // = ：双向的数据绑定，这时的flavor 就绑定到
// 了控制器上的 ctrlFlavor 上面
},
template:'<input type="text" ng-model="flavor"/>'
}
});

//页面中
<body>
<!-- 指令与控制器之间实现双向绑定  MyCtrl：是父scope -->
<div ng-controller="MyCtrl">
Ctrl:
<br>
<input type="text" ng-model="ctrlFlavor">
<br>
Directive:
<br>
<!--

当独立scope 是 @ 的时侯，需要用 {{ctrlFlavor}} 来取控制器中的值
是 = 的时侯，只接取值即可 ctrlFlavor,也就是取父scop中的值
-->
<drink flavor="ctrlFlavor"></drink>
</div>
</body>

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.sayHello=function(name){
alert("Hello "+name);
}
}])

//指令调用父作用域的函数
myModule.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&' //引用 父作用域中的函数
},
template:'<input type="text" ng-model="userName" /><br/>'+
'<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
}               //{name:userName} : 表示将 userName 的值绑定到 name上，从而作为函数的参数
});

//页面中：
<body>
<div ng-controller="MyCtrl">
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
</div>
</body>

var appModule = angular.module('TestFormModule', []);
appModule.controller("TestFormModule",function($scope){
$scope.user={
userName:'damoqiongqiu',
password:''
};

$scope.save=function(){
alert("保存数据!");
}
});

//页面中
<body>
<!-- angularJs 内置指令 from -->
<form name="myForm" ng-submit="save()" ng-controller="TestFormModule">
<input name="userName" type="text" ng-model="user.userName" required/>
<input name="password" type="password" ng-model="user.password" required/>

<!-- 将 myForm 表单绑定到 $invalid 内置指令上，表示提交按钮是可用还是不可用 -->
<input type="submit" ng-disabled="myForm.$invalid"/>
</form>
</body>

var expanderModule=angular.module('expanderModule', []);
expanderModule.directive('expander', function() {
return {
restrict : 'EA',
replace : true,
transclude : true, //内容与内容是可以变换的
scope : {
title : '=expanderTitle'
},
template : '<div>'
+ '<div class="title" ng-click="toggle()">{{title}}</div>'
// ng-transclude 在内容插入前，这个指令所在元素的任何已存在内容会被清除。
+ '<div class="body" ng-show="showMe" ng-transclude></div>'
+ '</div>',
link : function(scope, element, attrs) {
scope.showMe = false;
scope.toggle = function() { //提供指令函数
scope.showMe = !scope.showMe; //根据 scope.showMe 是否为true 来决定是否来显示
}
}
}
});
expanderModule.controller('SomeController',function($scope) {
$scope.title = '点击展开';
$scope.text = '这里是内部的内容。';
});

//页面中
<body>
<div ng-controller='SomeController'>
<expander class='expander' expander-title='title'>
{{text}} <!-- 这个内容会作为有 ng-transclude 指命的内容  -->>
</expander>
</div>
</body>

var expModule=angular.module('expanderModule',[])

expModule.directive('accordion', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
template : '<div ng-transclude></div>',
controller : function() {
var expanders = [];
this.gotOpened = function(selectedExpander) {
angular.forEach(expanders, function(expander) {
if (selectedExpander != expander) {
expander.showMe = false;
}
});
}
this.addExpander = function(expander) {
expanders.push(expander);
}
}
}
});

expModule.directive('expander', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
require : '^?accordion',
scope : {
title : '=expanderTitle'
},
template : '<div>'
+ '<div class="title" ng-click="toggle()">{{title}}</div>'
+ '<div class="body" ng-show="showMe" ng-transclude></div>'
+ '</div>',
link : function(scope, element, attrs, accordionController) {
scope.showMe = false;
accordionController.addExpander(scope); //添加 scope
scope.toggle = function toggle() {
scope.showMe = !scope.showMe;       //显示 scope
accordionController.gotOpened(scope);
}
}
}
});

expModule.controller("SomeController",function($scope) {
$scope.expanders = [{
title : 'Click me to expand',
text : 'Hi there folks, I am the content that was hidden but is now shown.'
}, {
title : 'Click this',
text : 'I am even better text than you have seen previously'
}, {
title : 'Test',
text : 'test'
}];
});

//页面中
<body ng-controller='SomeController' >

<accordion>
<!-- 根据 expanders数组的大小来创建多个 expander-->
<expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
{{expander.text}}
</expander>
</accordion>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航