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

Question

我正在使用指令，我的目标是将值绑定(bind)到我的孙组件并更新父元素，但这段代码不会冒泡到根。

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>