AngularJS：指令隔离范围未定义

Question

我正在使用AngularJS的双向绑定编写带有isolate scope的指令。 但是，我似乎无法让双向绑定工作。 无论我做什么， isolate scope上的populate属性总是undefined （虽然属性确实存在），而不是它应该被绑定的值。

HTML：

<html>
  <body ng-app="MyApp">
    <div ng-controller="MyController">
      {{data.dataProp}} <!-- demonstrates that data.dataProp is defined -->
      <scope-fail data-source="data.dataProp"></scope-fail>
    </div>
  </body>
</html>

JS：

angular.module("MyApp", [])
.controller('MyController', function ($scope) {
  $scope.data = {
    dataProp: 'Some Data'
  }
})
.directive('scopeFail', function ($window) {
  return {
    restrict: 'E',
    scope: {
      populate: '=dataSource'
    },
    template: '<div>Value: {{populate}}</div>',
    link: function (scope, element, attrs) {
      console.log('Scope property:', scope.populate); //prints Scope property: undefined
    }
  };
})

CodePen与上面的代码： CodePen链接

那么为什么CodePen没有显示“价值：一些数据”？ 我认为应该发生的是， populate绑定到自定义元素上的data-source的值，该元素是控制器作用域上的data.dataProp ，即Some Data 。

我在哪里出错/如何让隔离范围与data-source属性进行双向绑定？

非常感谢

Answer 1

更改populate: '=dataSource'以populate: '=source'或向data-source添加额外的data-属性前缀。 AngularJS自动剥离data-属性以允许有效的html5范围属性。

Answer 2

你的语法错了。 应该是这样

.directive('scopeFail', function ($window) {
  return {
    restrict: 'E',
    scope: {
      dataSource: '='
    },
    template: '<div>Value: {{scope.dataSource}}</div>',
    link: function (scope, element, attrs) {
      console.log('Scope property:', scope.dataSource); //prints Scope property: undefined
    }
  };
})

范围属性通过属性名称作为属性传递，并且您将数据绑定定义为双向，评估或只读。

编辑

csbarnes的回答也会起作用，因为dataSource: '='只是dataSource: '=dataSource'简写dataSource: '=dataSource'但它使可读性和调试更加困难IMO。 我发现保持属性名称和范围属性相同更容易。 但是每个人都有自己的。

AngularJS：指令隔离范围未定义

问题描述

2 个解决方案

解决方案1
11 已采纳 2015-07-13 21:42:41

解决方案2
0 2015-07-13 21:43:33

AngularJS：指令隔离范围未定义

问题描述

2 个解决方案

解决方案1 11 已采纳 2015-07-13 21:42:41

解决方案2 0 2015-07-13 21:43:33

解决方案1
11 已采纳 2015-07-13 21:42:41

解决方案2
0 2015-07-13 21:43:33