AngularJS:指令隔离范围未定义

cry*_*opi 4 javascript angularjs angularjs-directive angularjs-scope

我正在编写一个带有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>
Run Code Online (Sandbox Code Playgroud)

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
    }
  };
})
Run Code Online (Sandbox Code Playgroud)

CodePen与上面的代码:CodePen链接

那么为什么CodePen没有显示"价值:一些数据"?我认为应该发生的是populate绑定到控制器范围data-source上的自定义元素的值.data.dataPropSome Data

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

非常感谢

csb*_*nes 11

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