directive中的transclude里的scope BUG

概述

恩,这个标题起的很有逻辑的样子 :D
直接来看一小段代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// html
<body ng-controller="appCtrl">
<blue-label>
我是在 transclude 里的 a: {{ a }}
<br />
<input type="text" ng-model="a">
</blue-label>

我是在 外面 里的 a: {{ a }}
</body>

// javascript
var appModule = angular.module('app', []);

appModule.directive('blueLabel', function() {
return {
restrict: 'E',
template: '<div style="background:skyblue;"><span ng-transclude></span></div>',
transclude: true
};
});

appModule.controller('appCtrl',function($scope) {
$scope.a = '初始化内容';
});

可能你会认为 scope.a 要么就是在directive里,要么就是在controller里,可事实有点诡异。

  • controller把 scope.a 初始化了。
  • scope.a 却在directive里(不确定),未与controller同步。

JS Bin

解决方案

解决的办法很简单。

  • 在 controller 中 初始化 scope.aObject 类型。
  • scope.a 改为 scope.a.data,即 data 作为原属性。

JS Bin


技术: angularjs v1.2
时间: 2014年5月