-
关键字：directive
-
指令的作用域: 默认情况下子控制器和父控制器用的是同一个$scope,也就是说子控制器的$scope是可以覆盖掉父控制器的$scope的赋值
-
给子控件添加一个scope:true,作用域就不会被覆盖,就会独立出一个作用域.
-
如果在子控制器中使用的一个属性在父控制器中定义了,在子控制器中没有定义,就算加了scope:true,也会使用父控制器的数据,相当于控制器的嵌套,自己没有,就去找父亲
-
如果给scope设置一个{},就相当于固定作用域,只拿自己的,自己没有就不显示
-
如果给scope设置一个可以传递参数的配置,{content:’@’},可以像接受参数一样,使用父控制器的属性
-
scope:{myTitle:’@’},属于单向传递
-
scope:{myTitle:’@’},属于单向传递,且如果在子控制器中定义的属性中也有一个myTitle,会被父控制器中的myTitle覆盖
-
scope的修饰符除了是scope:{myTitle:’@’}这种形式,还可以是scope:{myTitle:’=’},
”@” 和 ”=” 区别在于是 ”@” 取值的时候使用”{{}}”插入语法
比如 <xmg content="{{content}}" my-title="{{title}}"></xmg>,
而 ”=”, 可是直接<xmg content="content" my-title="title"></xmg>
<body ng-app = "app" ng-controller = "wmxController">
<!--以元素形式出现-->
<wmx-dir>
<!--下面的内容会有ng-transclude的地方显示-->
<p>我是预留内容</p>
<hr>
{{msg}}
<hr>
{{name}}
<hr>
{{age}}
</wmx-dir>
<hr>
<!--以属性形式出现-->
<div wmx-dir>
<p>我也是预留内容哦</p>
{{msg}}
{{name}}
</div>
<hr>
<!--scope的修饰符除了是scope:{myTitle:’@’}这种形式时，需要{{}}-->
<!--<wmx-dir content="{{content}}" my-title="{{title}}"></wmx-dir>-->
<!--scope的修饰符除了是scope:{myTitle:’=’}这种形式时，直接使用，不需要{{}}-->
<wmx-dir content="{{content}}" my-title="title"></wmx-dir>
<hr>
<!--如果此处改变，下面的也会改变-->
<input type="text" ng-model="title">
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('wmxController',['$scope',function ($scope) {
$scope.name = '我是父控制器中的名字';
$scope.age = 110;
$scope.content = "我是父控制器中的内容";
$scope.title = "我是父控制器中的title";
}]);
/**
* 自定义指令：
* 参数一：指令的名称，如果属性中有大写字母，要用-隔开
* 参数二：自定义指令的回调方法，写逻辑的地方
*自定义指令的方法名directive 固定不变
* 注意指令是写在控制器之外的
* 默认情况下，指令使用的模型是与它所在控制器使用的是同一个
*/
app.directive('wmxDir',function () {
/**
* 返回一个对象，通过{}括起来的键值对称为对象
*/
return {
/**
* E:以元素形式出现
* A：以属性形式出现
* C：以类的形式出现
*/
restrict:'EA',
//指令模板必须有且只有一个根元素包裹起来
//如果此处改变，上面的不会跟着改变。因为是单向传递
// template:'<h1>{{msg}} <p>{{content}}</p> <p>{{myTitle}}</p> <input type="text" ng-model="myTitle"> </h1>',
// 如果此处改变，上面的也会跟着改变。因为属于双向传递
template:'<h1>{{msg}} <p>{{content}}</p> <input type="text" ng-model="myTitle"> </h1>',
//templateUrl指令用来替换原有的template
// 比template自定义指令的模板更强大
// templateUrl 可以指定一个html模板
// templateUrl:'template.html',
//是否替换原有的标签 false表示不替换
replace:true,
//ng-transclude指令用来处理自定义指令中的预留类内容显示的位置
transclude:true,
//自定义指令里面的控制器(子控制器)
//自定义的指令，可以有自己的作用域，有自己的模型（也有个$scope）
//父控制器中$scope的默认情况下会被覆盖
controller:function ($scope) {
$scope.name = "我是子控制器中的名字";
$scope.msg = "我是自定义指令中的信息";
// scope:{myTitle:’@’},属于单向传递
// 且如果在子控制器中定义的属性中也有一个myTitle,会被父控制器中的myTitle覆盖.
$scope.myTitle = '我是子控制器的title'
},
//给子控件添加一个scope:true,作用域就不会被覆盖,
// 就会独立出一个作用域.
// scope:true,
// 如果给scope设置一个{},就相当于固定作用域,
// 只拿自己的,自己没有就不显示
// scope:{}
//如果给scope设置一个可以传递参数的配置,{content:’@’},
// 可以像接受参数一样,使用父控制器的属性
scope:{
//外界传递进来的数据
content:'@',
//scope:{myTitle:’@’},属于单向传递
//@是单向传递，外界修改，内部会跟着修改
//内部修改，外界不会跟着修改
// myTitle:'@'
//scope的修饰符除了是scope:{myTitle:’@’}这种形式,
// 还可以是scope:{myTitle:’=’},
// ”@”和”=”区别在于是”@”取值的时候使用”{{}}”插入语法
// 比如 <xmg content="{{content}}" my-title="{{title}}"></xmg>,
// 而”=”,可是直接<xmg content="content" my-title="title"></xmg>
myTitle:'='
}
}
});
</script>
</body>
- scope:{childmentod:’&’},属方法传递,父控制器传递方法给子控制器.
<body ng-app = "app" ng-controller = "wmxController">
<wmx child-method = "parentMethod()">
<p>我是预留内容</p>
</wmx>
<hr>
<p wmx child-method = "parentMethod()"></p>
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('wmxController',['$scope',function ($scope) {
$scope.parentMethod = function () {
alert('我是父控制器中的方法')
}
}]);
app.directive('wmx',function () {
return {
restrict:'EA',
template:'<div><button ng-click="click()">点我触发自控制器中的方法</button></div>',
controller:function ($scope) {
$scope.click = function () {
$scope.childMethod();
}
},
replace:true,
//scope:{childmentod:’&’},属方法传递
// 父控制器传递方法给子控制器.
scope:{
//方法的传递
childMethod:'&'
}
}
});
</script>
</body>
- link指令
-
controller 中的方法在编译指令前执行，一般都是处理一些业务逻辑，dom还没有加载渲染完毕就已经执行
-
在controller里面只能处理一些数据逻辑，而不能操作DOM节点
-
link操作dom元素，所有controller在link之前被调用
-
所有内容编译之后会调用。
* 此方法执行时，所有的DOM元素都已经加载完毕
-
<body ng-app = "app" ng-controller = "wmxController">
<h2 ng-show="true">我是标题2</h2>
<hr>
<!--功能与ng-show相同-->
<p wmx-show="true"></p>
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('wmxController',['$scope',function ($scope) {
$scope.name = '我是controller';
alert($scope.name);
}]);
app.directive('wmxShow',function () {
return {
restrict:'A',
template:"<div>我是指令</div>",
controller:function ($scope) {
//controller 中的方法在编译指令前执行，一般都是处理一些业务逻辑
//dom还没有加载渲染完毕就已经执行
//在controller里面只能处理一些数据逻辑，而不能操作DOM节点
},
/**
* link操作dom元素，所有controller在link之前被调用
* 所有内容编译之后会调用。
* 此方法执行时，所有的DOM元素都已经加载完毕
* @param $scope 控制器中的模型
* @param ele 指令所在dom元素，注意它是一个JQLite对象
* @param attr 指令身上绑定的所有属性
*/
link:function ($scope,ele,attr) {
//试着打印参数代表什么
console.log(ele);
console.log(attr);
//先弹出控制器的，再弹出link的
alert("我是link");
//是在DOM都加载后数据渲染完毕执行的逻辑
if (attr.wmxShow == 'false'){
ele.css({
'display':'none'
});
}
}
}
});
</script>
</body>
网友评论