AngularJS：指令隔离范围未定义

Question

I am writing a directive with an isolate scope with a two-way binding in AngularJS . 我正在使用AngularJS的双向绑定编写带有isolate scope的指令。 However, I cannot seem to get the two-way binding to work. 但是，我似乎无法让双向绑定工作。 No matter what I do, the populate property on the isolate scope is always undefined (although the property does exist) instead of being the value it's supposed to be bound to. 无论我做什么， isolate scope上的populate属性总是undefined （虽然属性确实存在），而不是它应该被绑定的值。

HTML: 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: 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 with above code: CodePen link CodePen与上面的代码： CodePen链接

So why doesn't the CodePen show "Value: Some Data"? 那么为什么CodePen没有显示“价值：一些数据”？ What I think is supposed to happen is that populate binds to the value of data-source on the custom element which is data.dataProp on the controller scope which is Some Data . 我认为应该发生的是， populate绑定到自定义元素上的data-source的值，该元素是控制器作用域上的data.dataProp ，即Some Data 。

Where am I going wrong with this/how can I get the isolate scope to have a two-way binding with the data-source attribute? 我在哪里出错/如何让隔离范围与data-source属性进行双向绑定？

Thank you so much 非常感谢

Answer 1

Either change populate: '=dataSource' to populate: '=source' or add an extra data- attribute prefix to data-source . 更改populate: '=dataSource'以populate: '=source'或向data-source添加额外的data-属性前缀。 AngularJS automatically strips the data- attribute to allow for valid html5 scoped attributes. AngularJS自动剥离data-属性以允许有效的html5范围属性。

Answer 2

You have the wrong syntax. 你的语法错了。 It should be this 应该是这样

.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
    }
  };
})

The scope properties are passed in as attributes by the attribute name, and you define the data binding as two way, evaluate, or read only. 范围属性通过属性名称作为属性传递，并且您将数据绑定定义为双向，评估或只读。

EDIT 编辑

csbarnes answer will also work since dataSource: '=' is just shorthand for dataSource: '=dataSource' but it makes readability and debugging more difficult IMO. csbarnes的回答也会起作用，因为dataSource: '='只是dataSource: '=dataSource'简写dataSource: '=dataSource'但它使可读性和调试更加困难IMO。 I find it easier to keep the attribute names and scope properties the same. 我发现保持属性名称和范围属性相同更容易。 But to each their own. 但是每个人都有自己的。

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