在《AngularJS权威教程》中，自定义指令和DOM双向数据绑定有一个在线demo，网址：http://jsbin.com/IteNita/1/edit?html,js,output，具体代码如下：
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
<label>Their URL field:</label>
<input type="text" ng-model="theirUrl">
<div my-directive
some-attr="theirUrl"
my-link-text="Click me to go to Google"></div>
<script>
angular.module(‘myApp‘, [])
.directive(‘myDirective‘, function() {
return {
restrict: ‘A‘,
replace: true,
scope: {
myUrl: ‘=someAttr‘,
myLinkText: ‘@‘
},
template: ‘ <div> <label>My Url Field:</label> <input type="text" ng-model="myUrl" /> <a href="{{myUrl}}">{{myLinkText}}</a> </div> ‘
}
})
</script>
</body>
</html>
其中myUrl: ‘=someAttr‘我不是很理解，于是改成 myUrl: ‘@someAttr‘,但是这样页面显示如图：
查看元素发现链接的href="theirUrl",并且；两个输入框的内容也不同步，仔细查看代码，发现DOM中将some-attr设置值方式不是表达式，所以修改如下（修改处为绿色）：
<body>
<label>Their URL field:</label>
<input type="text" ng-model="theirUrl">
<div my-directive
some-attr={{theirUrl}}
my-link-text="Click me to go to Google"></div>
<script>
angular.module(‘myApp‘, [])
.directive(‘myDirective‘, function() {
return {
restrict: ‘A‘,
replace: true,
scope: {
myUrl: ‘@someAttr‘,
myLinkText: ‘@‘
},
template: ‘ <div> <label>My Url Field:</label> <input type="text" ng-model="myUrl" /> <a href="{{myUrl}}">{{myLinkText}}</a> </div> ‘
}
})
</script>
</body>
效果是，第2个输入框随着第1个变化，反之不是。
总结：指令要访问其内部的指令，需要：
1.指令属性值用表达式即{{}}设置，改为“”
2.内部指令对应属性数据绑定”@”改为”=”
时间： 2024-11-03 20:59:29