为什么我的指令中没有这个字段绑定？答案

【问题标题】：Why isn't this field binding in my directive?为什么我的指令中没有这个字段绑定？
【发布时间】：2014-12-02 21:04:41
【问题描述】：

我在 dataSourceModel 范围变量上有一个双向绑定的指令，但由于某种原因，它在指令中显示为未定义。我在这里做错了吗？

Plunker：http://plnkr.co/edit/LxWMbY9qtDSBUPWNqWV7?p=preview

代码：

HTML：

<div ng-controller='TestCtrl'>
  <test-directive 
      selected-id='selectedId' 
      data-source-model='workOrderItems'>  <!-- This does not work -->
  </test-directive>
  {{workOrderItems}}  <!-- this works -->
</div>

脚本：

var app = angular.module("testApp", []);

app.controller('TestCtrl', ['$scope', function ($scope) {
    $scope.workOrderItems = 'abcd'; 
    $scope.selectedId = '123';
}]);

app.directive('testDirective',function () {
    return {
        restrict: 'E',
        scope: {
          selectedId: '=',
          dataSourceModel: '='
        },
        replace: true,
        template: "<div></div>",
        link: function (scope, element, attrs) {
          console.log(scope.selectedId, scope.dataSourceModel);
        }
    }
});

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

data- 是自定义 HTML5 属性的前缀，因此 data-source-model='workOrderItems' 在您的指令中仅转换为 sourceModel。

尝试将您的指令属性重命名为不以数据开头的内容（或在 HTML 中将其引用为data-data-source-model），它应该可以工作。

【讨论】：