<html lang="en" ng-app="Demo"> <head> <meta charset="utf-8"> <title>Directive Html</title> <script src="angular.min.js"></script> <script type="text/javascript"> var app = angular.module('Demo', [], angular.noop); app.directive('ysBlock', function(){ return { compile: angular.noop, template: '<div style=" 200px; border: 1px solid black;">'+ '<h1 style="background-color: gray; color: white; font-size: 22px;">{{ title }}</h1>'+ '<div>{{ text }}</div>'+ '</div>', replace: false, scope: { title: '@titlearr', //directive里面的title取值为element属性titlearr的动态的值{{title}} text: '=textarr'//directive里面text的取值为element属性textarr的值text在element中scope中的值，scope.text },//这里的=title其实用的是 restrict: 'E' }; }); app.controller('TestCtrl', function($scope){ $scope.title = '标题在这里'; $scope.text = '内容在这里'; }); angular.bootstrap(document, ['Demo']); </script> </head> <body> <div ng-controller="TestCtrl"> <ys-block titlearr="{{title}}" textarr="text"></ys-block> <p>标题: <input ng-model="title" /></p> <p>内容: <input ng-model="text" /></p> <span>{{title}},{{text}}</span> </div> </body> </html>
<html lang="en" ng-app="Demo"> <head> <meta charset="utf-8"> <title>Directive Html</title> <script src="angular.min.js"></script> <script type="text/javascript"> //&attr 是包装一个函数出来，这个函数以节点所在的 scope 为上下文这里是一个上下文交错的环境，通过 & 这种机制，让指令的 scope 与节点的 scope 发生了互动 var app = angular.module('Demo', [], angular.noop); app.directive('a', function(){ var func = function(element, attrs, link){ return function llink(scope){ console.log(scope); scope.a(); // 执行了here = here + 1 所以虽然TestCtrl设置here为123，页面上最终的here为124 scope.b(); // 执行了TestCtrl的show() scope.show = function(here){// ----点击是执行link里面的show(here)与TestCtrl无关 console.log('Inner, ' + here); scope.a({here: 5});// ---- 但是此处的scope.a({here: 5})，因为a执行的是TestCtrl的上下文，于是a传递的一个对象，里面的所有属性 //TestCtrl就全收下了，接着执行here = here+1，所以会显示6 } } } return { compile: func, scope: { a: '&abc', //scope.a是&abc 即：scope.a = function() {here = here +1;} here是TestCtrl的 b: '&ngClick'//scope.b是&ngClick 即：scope = function() {show(here);} 这里的show()和here都是TestCtrl的 }, restrict: 'A' }; }); app.controller('TestCtrl', function($scope){ $scope.here = 123; console.log($scope); $scope.show = function(here){ console.log(here); } }); angular.bootstrap(document, ['Demo']); </script> </head> <body> <div ng-controller="TestCtrl"> <div a abc="here = here + 1" ng-click="show(here)">这里</div> <div>{{ here }}</div> </div> </body> </html>