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: 
   <br />
   <input type="text" ng-model="a">
  </blue-label>
  
  我是在 外面 里的 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月