就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模块分离。后者我暂时没接触,但数据交互部分却是一样的。所以举几个前者的例子,以备以后忘记。
directive本身的作用域$scope可以选择是否封闭,不封闭则和其controller共用一个作用域$scope。例子如下:
<body ng-app="myApp" ng-controller="myCtrl"> <test-directive></test-directive> <script> angular.module("myApp",[]) .controller("myCtrl",function($scope){ $scope.data = { name:"白衣如花" }; }) .directive("testDirective",function(){ return { restrict:"E", template:"<h1>{{data.name||'未定义'}}</h1>" } }); </script> </body>
显示结果为:白衣如花,可以知道directive中的data.name就是myCtrl控制器中的$scope.data.name。
那么封闭的directive呢?怎么封闭,封闭效果是什么样的,封闭后怎么数据交互?这些都是我这几天摸索的东西。
<body ng-app="myApp" ng-controller="myCtrl"> <test-directive></test-directive> <script> angular.module("myApp",[]) .controller("myCtrl",function($scope){ $scope.data = { name:"白衣如花" }; }) .directive("testDirective",function(){ return { restrict:"E", scope: {}, template:"<h1>{{data.name||'未定义'}}</h1>" } }); </script> </body>
结果显示为:未定义。所以在directive定义时,添加属性scope就可以把directive的作用域和父控制器的作用域分离开来。
好,了解了开放和封闭之后,进入主题,如何进行数据交互。个人觉得数据交互分为:父控制器获取directive的变量;directive获取父控制器的变量;父控制器调用directive的函数;directive调用父控制器的函数。
1.父控制器获取directive的变量。比如封装了一个输入框接受用户输入,父控制器点击搜索按钮要获取用户输入:
<body ng-app="myApp" ng-controller="myCtrl"> <p>名字:{{outerName}}</p> <test-directive inner-name="outerName"></test-directive> <script> angular.module("myApp",[]) .controller("myCtrl",function($scope){ }) .directive("testDirective",function(){ return { restrict:"E", scope: { innerName: "=" }, template:"<input type='text' ng-model='innerName' placeholder='白衣如花'>" } }); </script> </body>
显示结果如下:
分析:从数据流向说起,testDirective中的一个input输入绑定在innerName中,innerName是directive私有作用域拥有的变量,外部控制器不能直接用。通过innerName: "="传递给html中的inner-name属性,
而inner-name属性则绑定在外部控制器的outerName变量中,所以最后显示在最上面的<p>标签内。上述代码等价于如下代码:
<test-directive></test-directive> scope: { innerName: "=name" },
由inerName: "="变成了innerName: "=name",而html属性绑定也由inner-name变成了name。
2.directive获取父控制器的变量。这个应用场合应该挺多的,比如公共的页眉页脚,公共的展示面板等。
这个用上面例子的"="一样可以实现,于是我们知道了"="是双向绑定。但是我们要防止directive内部意外修改数据该怎么办呢?于是单向绑定"@"就出场了。
<body ng-app="myApp" ng-controller="myCtrl"> <input type='text' ng-model='outerName' placeholder='白衣如花'> <test-directive inner-name="{{outerName}}"></test-directive> <script> angular.module("myApp",[]) .controller("myCtrl",function($scope){ }) .directive("testDirective",function(){ return { restrict:"E", scope: { innerName: "@" }, template:"<p>名字:{{innerName}}</p>" + "<button ng-click='innerName=innerName+1'>点击</button>" } }); </script> </body>
值得注意的是:@在html的属性绑定时需要{{}}开标识,而=则不用。我的理解是,对于父控制器而言,@是数据传递,而=是数据绑定,所以有这些区别。directive中加入了一个按钮用于验证修改数据后
父控制器是否发生改变,结果是=有变化,@无变化,很容易得出结论:=是双向绑定,@是双向绑定。
3.directive调用父控制器的函数。应用场合,暂时想不到(汗)。
变量用=和@来传递,函数则用&。例子如下:
<body ng-app="myApp" ng-controller="myCtrl"> <p>名字:{{outerName}}</p> <test-directive on-click="click(name)"></test-directive> <script> angular.module("myApp",[]) .controller("myCtrl",function($scope){ $scope.click = function (name) { $scope.outerName = name || "白衣如花"; } }) .directive("testDirective",function(){ return { restrict:"E", scope: { onClick: "&" }, template:"<input type='text' ng-model='innerName' placeholder='白衣如花'>" + "<button ng-click='onClick({name: innerName})'>点击</button>" } }); </script> </body>