js

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.a 为 Object 类型。
  • scope.a 改为 scope.a.data，即 data 作为原属性。

JS Bin

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