Question

我正在使用isolate scope编写一个带有双向绑定的指令AngularJS。但是，我似乎无法让双向绑定工作。无论我做什么，populate上的isolate scope属性始终是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 link

那为什么CodePen没有显示“Value：Some Data”？我认为应该发生的是populate绑定到自定义元素data-source的值，data.dataProp是控制器范围Some Data。

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

非常感谢

Answer 1

将populate: '=dataSource'更改为populate: '=source'或向data-添加额外的data-source属性前缀。 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'的简写，但它使IMO的可读性和调试更加困难。我发现保持属性名称和范围属性相同更容易。但是每个人都有自己的。

AngularJS：指令隔离范围未定义

2 个答案: