【问题标题】：Angularjs Directive content not linked to isolate scopeAngularjs指令内容未链接到隔离范围
【发布时间】：2018-05-23 19:57:44
【问题描述】：

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

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>

我进行了一些研究，但没有找到任何解决此案例的方法。我将不胜感激任何给定的帮助:)

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案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>

【讨论】：

谢谢@georgeawg，这个transclude 函数总是必要的吗？我用一级绑定（root to child）做了一些测试，它工作正常..无论如何，再次感谢！
您误认为一级绑定工作得很好。如果您将绑定名称设置为与属性名称不同的名称，您将看到它不起作用。通常，元素内的内容绑定到父范围。诸如ng-if、ng-include、ng-repeat 等指令会嵌入其内容。