Question

在具有transcluded范围的指令中，$ watch监听器似乎不会触发。双向绑定似乎也不起作用。我将粘贴代码中的一个简单示例来说明问题以及它的jsbin链接。我的问题是：这可能吗？如果是这样我做错了什么？任何帮助将不胜感激。

HTML

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
  <meta charset="utf-8">
  <title>Angular tips</title>
</head>
<body ng-controller="MainCtrl">
  <person header="header">
    <h2>{{header}}</h2>
    <p>Hello, I am {{person.name}} and,</p>
    <p>I am a {{person.profession}}</p>
    <input type="text" placeholder="Change me" ng-model="person.name" />
    <input type="text" placeholder="Change me" ng-model="person.profession" />
  </person>
</body>
</html>

的JavaScript

angular.module('app', [])

.controller('MainCtrl', function($scope) {
  $scope.person = {
    name: 'John Doe',
    profession: 'Fake name'
  };

  $scope.header = 'Person';
})

.directive('person', function() {
  return {
    restrict: 'EA',
    scope: {
      header: '='
    },
    transclude:true,
    template: '<div ng-transclude></div>',
    link: function(scope, element, attrs) {
      scope.$watch('person', function(){
        console.log('person changed');
      }, true);
      scope.person = {
        name: 'Directive Joe',
        profession: 'Scope guy'
      };

      scope.header = 'Directive\'s header';
    }
  };
});

是否可以$观察指令的转换范围，甚至双向绑定它？

0 个答案: