学习AngularJs:Directive指令用法（完整版）

方式提供一种途经是 directive 能在父 scope 的上下文中执行一个表达式。此表达式可以是一个 function。
比如当你写了一个 directive，当用户点击按钮时，directive 想要通知 controller，controller 无法知道 directive 中发生了什么，也许你可以通过使用 angular 中的 event 广播来做到，但是必须要在 controller 中增加一个事件监听方法。
最好的方法就是让 directive 可以通过一个父 scope 中的 function，当 directive 中有什么动作需要更新到父 scope 中的时候，可以在父 scope 上下文中执行一段代码或者一个函数。

如下示例在 directive 中执行父 scope 的 function。

lt;!DOCTYPE htmlgt; 
lt;html lang="zh" ng-app="myApp"gt; 
lt;headgt; 
 lt;meta charset="UTF-8"gt; 
 lt;titlegt;AngularJS入门学习lt;/titlegt; 
 lt;script type="text/javascript" src="./1.5.3/angular.min.js"gt;lt;/scriptgt; 
lt;/headgt; 
lt;bodygt; 
 lt;div ng-controller="myController"gt; 
 lt;divgt;父scope： 
 lt;divgt;Say：{{value}}lt;/divgt; 
 lt;/divgt; 
 lt;divgt;隔离scope： 
 lt;div isolated-directive action="click()"gt;lt;/divgt; 
 lt;/divgt; 
lt;/divgt; 
lt;/bodygt; 
lt;script type="text/javascript"gt; 
var app = angular.module('myApp', []); 
 app.controller("myController", function ($scope) { 
 $scope.value = "hello world"; 
 $scope.click = function () { 
 $scope.value = Math.random(); 
 }; 
 }).directive("isolatedDirective", function () { 
 return { 
 scope: { 
 action: "" 
 }, 
 template: 'lt;input type="button" value="在directive中执行父scope定义的方法" ng-click="action()"/gt;' 
 } 
 }) 
lt;/scriptgt; 
lt;/htmlgt; 

效果：

指令的内容比较多，下面再来讲讲transclude、compline、link、contrller

8.transclude
nbsp;如果不想让指令内部的内容被模板替换，可以设置这个值为true。一般情况下需要和ngTransclude指令一起使用。 比如：template:"lt;divgt;hello every lt;div ng-transcludegt;lt;/divgt;lt;/divgt;"，这时，指令内部的内容会嵌入到ng-transclude这个div中。也就是变成了lt;divgt;hello every lt;divgt;这是指令内部的内容lt;/divgt;lt;/divgt;。默认值为false；这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。当你开启transclude后，你就可以使用ng-transclude来指明了应该在什么地方放置transcluded内容

lt;!DOCTYPE htmlgt; 
lt;html lang="zh" ng-app="myApp"gt; 
lt;headgt; 
 lt;meta charset="UTF-8"gt; 
 lt;titlegt;AngularJS入门学习lt;/titlegt; 
 lt;script type="text/javascript" src="./1.5.3/angular.min.js"gt;lt;/scriptgt; 
lt;/headgt; 
lt;div sidebox title="Links"gt; 
  lt;ulgt; 
  lt;ligt;First linklt;/ligt; 
  lt;ligt;Second linklt;/ligt; 
  lt;/ulgt; 
lt;/divgt; 
lt;/bodygt; 
lt;script type="text/javascript"gt; 
var app = angular.module('myApp', []); 
app.directive('sidebox', function() { 
 return { 
 restrict: 'EA', 
 scope: { 
  title: '@' 
 }, 
 transclude: true, 
 template: 'lt;div class="sidebox"gt; 
  lt;div class="content"gt; 
  lt;h2 class="header"gt;{{ title }}lt;/h2gt; 
  lt;span class="content" ng-transcludegt; 
  lt;/spangt; 
  lt;/divgt; 
 lt;/divgt;' 
 }; 
}); 
lt;/scriptgt; 
lt;/htmlgt; 

结果：

当nbsp; transclude: false,时

如果指令使用了transclude参数，那么在控制器无法正常监听数据模型的变化了。建议在链接函数里使用$watch服务。
9.controller
可以是一个字符串或者函数。

若是为字符串，则将字符串当做是控制器的名字，来查找注册在应用中的控制器的构造函数

angular.module('myApp', []) 
.directive('myDirective', function() { 
restrict: 'A', // 始终需要 
controller: 'SomeController' 
}) 
// 应用中其他的地方，可以是同一个文件或被index.html包含的另一个文件 
angular.module('myApp') 
.controller('SomeController', function($scope, $element, $attrs, $transclude) { 
// 控制器逻辑放在这里 
}); 
也可以直接在指令内部的定义为匿名函数，同样我们可以再这里注入任何服务（$log,$timeout等等）

[html] view plain copy 在CODE上查看代码片派生到我的代码片
angular.module('myApp',[]) 
.directive('myDirective', function() { 
restrict: 'A', 
controller: 
function($scope, $element, $attrs, $transclude) { 
// 控制器逻辑放在这里 
} 
}); 

另外还有一些特殊的服务（参数）可以注入

（1）$scope，与指令元素相关联的作用域

（2）$element，当前指令对应的 元素

（3）$attrs，由当前元素的属性组成的对象

（4）$transclude，嵌入链接函数，实际被执行用来克隆元素和操作DOM的函数

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!