Angularjs 指令内容未链接到隔离范围

Question

我正在使用指令，我的 objective 是将值绑定到我的孙组件并更新父元素，但此代码不会冒泡到根。

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('root', function ($scope) {
  vm = this;
 vm.value = 'Joe Doe';
});

myApp.directive('child', function () {
 return {
   restrict: 'A',
    scope: {
      paramOne: '=paramOne'
    },
    link: function (scope, elm, attrs) {
      console.log('Child value: ', scope.paramOne);
    }
  }
});

myApp.directive('grandchild', function () {
 return {
   restrict: 'A',
    scope: {
      paramTwo: '=paramTwo'
    },
    link: function (scope, elm, attrs) {
      console.log('Grandchild value: ', scope.paramTwo);
    }
  }
});

<script src="//unpkg.com/angular/angular.js"></script>

<div ng-app="myApp" ng-controller="root as vm">
  Field Value: <strong>{{vm.value}}</strong>
  <hr>
  <div child param-one="vm.value">
    Child param value: {{paramOne}}    
    <div grandchild param-two="paramOne">
      Granchild param value: {{paramTwo}} <br>
      <input type="text" ng-model="paramTwo" >
    </div>
  </div>
</div>

我做了一些研究，但没有找到解决这个问题的办法。我将不胜感激任何给予的帮助:)

Answer 1

指令需要嵌入内容并将其附加到链接函数中的元素：

    transclude: true,
    link: function (scope, elem, attrs, ctrl, transcludeFn) {
      transcludeFn(scope, function(clone) {
        elem.append(clone);
      });

The DEMO

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('root', function ($scope) {
    vm = this;
    vm.value = 'Joe Doe';
});

myApp.directive('child', function () {
return {
    restrict: 'A',
    scope: {
      paramOne: '=paramOne'
    },
    transclude: true,
    link: function (scope, elem, attrs, ctrl, transcludeFn) {
      transcludeFn(scope, function(clone) {
        elem.append(clone);
      });

      console.log('Child value: ', scope.paramOne);
    }
  }
});

myApp.directive('grandchild', function () {
return {
    restrict: 'A',
    scope: {
      paramTwo: '=paramTwo'
    },
    transclude: true,
    link: function (scope, elem, attrs, ctrl, transcludeFn) {
      transcludeFn(scope, function(clone) {
        elem.append(clone);
      });

      console.log('Grandchild value: ', scope.paramTwo);
    }
  }
});

<script src="//unpkg.com/angular/angular.js"></script>

<div ng-app="myApp" ng-controller="root as vm">
  Field Value: <strong>{{vm.value}}</strong>
  <hr>
  <div child param-one="vm.value">
    Child param value: {{paramOne}}    
    <div grandchild param-two="paramOne">
      Granchild param value: {{paramTwo}} <br>
      <input type="text" ng-model="paramTwo" >
    </div>
  </div>
</div>

Angularjs 指令内容未链接到隔离范围

Angularjs Directive content not linked to isolate scope

javascript

angularjs

angularjs-directive

The DEMO