自己对于=绑定的理解
把代码改动了下便于自己理解概念
<html ng-app='expanderModule'> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="ExpanderSimple.css"/> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="ExpanderSimple.js"></script> </head> <body> <div ng-controller='SomeController'> <h1>{{title}}</h1> <expander class='expander' title1='title'> {{text}} </expander> </div> </body> </html>
var expanderModule=angular.module('expanderModule', []); expanderModule.directive('expander', function() { return { restrict : 'EA', replace : true, transclude : true, scope : { title1 : '=' }, template : '<div>' + '<div class="title" ng-click="toggle()">{{title1}}</div>' + '<div class="body" ng-show="showMe" ng-transclude></div>' + '</div>', link : function(scope, element, attrs) { scope.showMe = false; scope.toggle = function() { scope.showMe = !scope.showMe; scope.showMe ? scope.title1 = "点击收起" : scope.title1 = "点击展开"; } } } }); expanderModule.controller('SomeController',function($scope) { $scope.title = '点击展开'; $scope.text = '这里是内部的内容。'; });
我的理解,=绑定更像是c里面的指针。传的是指向变量的地址。
缺省只写等号,应该是表示同名,这里的同名是指,指令里的属性名称,和独立scope对象里的属性名称相同。
和$scope的属性名无关。
template中的{{title1}}指的是独立scope中的title1。