Geek Answers Handbook

AngularJS: Directive Isolated Area Undefined

I write a directive to the isolate scopetwo-way binding to AngularJS. However, I cannot get the two-way binding to work. No matter what I do, the property populateis isolate scopealways undefined(although the property exists), and not as the value that it should bind.

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 with above code: CodePen link

So why doesn't CodePen show “Value: Some Data”? It is assumed that it is assumed that it is populateassociated with a value data-sourcein a user element that is data.dataPropin the control area that is equal Some Data.

/ ?

+4
2

populate: '=dataSource' populate: '=source', data- data-source. AngularJS data-, html5.

+11

.

.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. . .

0

More articles:


All Articles