AngularJS: 指令隔离作用域未定义。

Question

AngularJS: 指令隔离作用域未定义。

javascriptangularjsangularjs-directiveangularjs-scope

4

我将翻译以下内容：我正在使用AngularJS编写一个具有双向绑定的隔离作用域指令。然而，我似乎无法使双向绑定起作用。无论我做什么，隔离作用域上的populate属性始终是未定义的（尽管该属性存在），而不是被绑定到它应该绑定的值。

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没有显示“Value：Some Data”？我认为应该发生的是populate绑定到自定义元素上的data-source的值，该值在控制器作用域中是data.dataProp，即Some Data。

我在哪里出错了/如何使隔离范围与数据源属性具有双向绑定？

非常感谢

- cryptopi

2个回答

0

您的语法有误。应该是这样的

.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'的简写，但是在我看来这样做会使可读性和调试更加困难。我发现保持属性名称和作用域属性相同更容易。但每个人都有自己的喜好。

- richbai90

1

dataSource: '=' 只是 dataSource: '=dataSource' 的简写。请查看 AngularJS 文档中有关隔离作用域的示例。 - csbarnes

如果我将此指令代码复制到新的[CodePen]（http://codepen.io/anon/pen/MwXjVG）中并覆盖我的旧指令代码，则仍然存在相同的问题。 csbarnes的回答很有道理，为我解决了问题-谢谢关于样式的提醒，我将来会尝试保持我的作用域属性和属性名称相同。 - cryptopi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- csbarnes · Accepted Answer

要么将populate: '=dataSource'改为populate: '=source'，要么在data-source前面添加额外的data-属性前缀。AngularJS会自动剥离data-属性以允许有效的html5作用域属性。