Question

我有这样的设置：

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function() {});

myApp.directive("grandParent", function() {
	return {
		template: [
			'<div style="border: 1px solid">',
				'<p>transcluded view is below:</p>',
				'<ng-transclude></ng-transclude>',
			'</div>'
		].join(""),
		transclude: true,
		controller: function() {
			this.getMe = "grandParentCtrl.controller.getMe";
		}
	};
});

myApp.directive('parent', function($compile) {
	return {
		require: "^^grandParent",
		link: function($scope, $element, $attrs, grandParentCtrl) {
			$element.append($compile('<son></son>')($scope, undefined, {
				transcludeControllers: {
					grandParent: {
						instance: grandParentCtrl
					}
				}
			}));
		}
	}
});

myApp.directive('son', function($compile) {
  return {
    require: '^^grandParent',
		template: [
			'<div class="btn btn-danger">',
				'abc: <i>{{abc}}</i>',
			'</div>'
		].join(""),
		link: function(scope, element, attrs, ctrl) {
			scope.abc = ctrl.getMe;
		}
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl as vm">
  <grand-parent>
		<parent></parent>
  </grand-parent>
</div>

＆＃13;

（grand-parent指令有parent指令。parent指令$compile s son指令

在指令 son 中，如果我require: "^^grandParent"，则会出错

"grandParent" directive required by "son" directive cannot be found

但是，如果在儿子我写require: "^grandParent"（*使用^而不是^^）它可以正常工作。

如果我们查看生成的HTML，它看起来像这样：

<grand-parent>
  <parent>
    <son>
    </son>
  </parent>
</grand-parent>

显然， grand-parent 严格来说是 son 的祖先。那么为什么会出错？

Answer 1

grandParent - ＆gt;添加controllerAs：'grandParent'。
儿子 - ＆gt;用'^ grandParent'替换require：'^^ grandParent'。

JS：

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

        myApp.controller('MyCtrl', function() {});

        myApp.directive("grandParent", function() {
            return {
                template: [
                    '<div style="border: 1px solid">',
                        '<p>transcluded view is below:</p>',
                        '<ng-transclude></ng-transclude>',
                    '</div>'
                ].join(""),
                transclude: true,
                controller: function() {
                    this.getMe = "grandParentCtrl.controller.getMe";
                },
            controllerAs: 'grandParent'
            };
        });

        myApp.directive('parent', function($compile) {
          return {
                require: "^^grandParent",
            link: function($scope, $element, $attrs, grandParentCtrl) {
              $element.append($compile('<son></son>')($scope, undefined, {
                        transcludeControllers: {
                            grandParent: {
                                instance: grandParentCtrl
                            }
                        }
                    }));
            }
          }
        });

        myApp.directive('son', function($compile) {
          return {
            require: '^grandParent',
                template: [
                    '<div class="btn btn-danger">',
                        'abc: <i>{{abc}}</i>',
                    '</div>'
                ].join(""),
            link: function(scope, element, attrs, ctrl) {
                    scope.abc = ctrl.getMe;
                }
          };
        });

Wanna know how I did it - check the updated fiddle :-)：

$ compile transcludeControllers不适用于＆＃34; ^^ grandParentCtrl＆＃34;

1 个答案: