angularjs·的使用：指令（3）

最新推荐文章于 2024-10-24 17:55:59 发布

wzz没bug

最新推荐文章于 2024-10-24 17:55:59 发布

阅读量301

点赞数

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/wangzhanzheng/article/details/52232606

版权

angularjs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1. 定义directive

var myModule = angular.module("HelloAngular", []);
myModule.directive("hello", function(){
	return {
	restrict:’AEMC’,//匹配模式
	template:’<div></div>’,//模板
	replace:true
}
});
restrict：匹配模式
	E:元素 <my-menu title=products></my-menu>	
<span style="white-space:pre">	</span>A:属性（默认）<div my-menu=Products></div>
	C:样式 <div class=my-menu:products></div>
	M:注释 <!—directive:my-menu products -->
推荐使用元素和属的方式使用指令
当需要创建带有自己的模板的指令时，使用元素名称的方式创建指令
当需要为已经有的html标签增加功能时使用属性的方式创建指令
template：模板：
	这是最终要替换的内容，可以将内容直接写在里面，或者写文件名，比如：templateUrl:’hello.html’
replace:替换操作
如果在<hello><div>aa</div></hello>自定义指令中有嵌套的，则可以使用下面的替换：
myModule.directive("hello", function(){
	return {
	restrict:’AEMC’,//匹配模式
	transclude:true
	template:
’<div>hello
<div ng-transclude></div>
</div>’ 
}
});
把嵌套的内容放在ng-transclude的位置

2. templateCache：模板缓存

var myModule = angular.module("HelloAngular", []);
myModule.run(function($templateCache){
$templateCache.put(“hello.html”, “<div>hello</div>”)
})
run方法：当所有模块加载完毕，这个方法会被执行一次
缓存完毕后，使用时，在
template: $templateCache.get(“hello.html”),//模板

3. 指令调用控制器方法

var myModule = angular.module("HelloAngular", []);
myModule.directive("hello", function(){
	return {
	restrict:’AEMC’,//匹配模式
	template:’<div></div>’,//模板
	replace:true
	link:function(scope, element, attr){
	element.bing(‘mouseenter’, function(event){
		scope.$apply(attrs.how);
});
}
}
});
使用：
<hello how=”loadData()”></hello>
loadData方法要在controller中写

4. 指令之间的交互

4.1 先定义一个superman指令

var myModule = angular.module("HelloAngular", []);
myModule.directive("superman", function() {
    return {
        scope: {},
        restrict: 'AE',
        controller: function($scope) {
            $scope.abilities = [];
            this.addStrength = function() {
                $scope.abilities.push("strength");
            };
        },
        link: function(scope, element, attrs) {
            element.addClass('btn btn-primary');
            element.bind("mouseenter", function() {
                console.log(scope.abilities);
            });
        }
    }
});
controller可以暴露方法给外部调用
link用于处理指令内部的一些逻辑

4.2 定义一个strength指令

myModule.directive("strength", function() {
    return {
        require: '^superman',
        link: function(scope, element, attrs, supermanCtrl) {
            supermanCtrl.addStrength();//自动注入的参数
        }
    }
});

4.3 使用

<div class="row">
	<div class="col-md-3">
		<superman strength>动感超人---力量</superman>
	</div>
</div>

4.4 独立scope

4.4.1scope绑定策略：

@：把当前属性做为字符串传递，还可以绑定来自外层scope的值，在属性中插入{{}}即可
=：与父scope中的属性进行双向绑定
&：传递一个来自父scope的函数，稍后调用

4.4.2 @方式

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>"
    }
});
html：
<drink flavor="{{ctrlFlavor}}"></drink>

4.4.3 =方式

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
	$scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
    return {
    	restrict:'AE',
        scope:{
        	flavor:'='
        },
        template:'<input type="text" ng-model="flavor"/>'
    }
});
使用：
Ctrl:
<input type="text" ng-model="ctrlFlavor">
Directive:
<drink flavor="ctrlFlavor"></drink>

4.4.4 &方式

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/>'
    }
});
使用：
<greeting greet="sayHello(name)"></greeting>