javascript - ng-include 包含在 ng-include 中，两者都绑定(bind)到不同的 Controller

Question

我有一个指向 child.html 的 ng-include，它与 childcontroller 相关联，parent.html 文件与 parentcontroller 相关联，在 child.html 文件中还有另一个 ng-include 指向 grandChild.html它与孙 Controller 相关联。问题是 grandchild.html 无法识别 grandchildcontroller。

chrome 上的控制台错误是

angular.js:15567 TypeError: Cannot read property 'x' of undefined

at grandchildcontroller(core.js:18)
at Object.invoke (angular.js:5141)
at $controllerInit (angular.js:11704)
at nodeLinkFn (angular.js:10517)
at compositeLinkFn (angular.js:9832)
at publicLinkFn (angular.js:9697)
at Object.link (angular.js:29821)
at angular.js:1388
at invokeLinkFn (angular.js:11266)
at nodeLinkFn (angular.js:10585)
"<div ng-include="'...../grandChild.html'" class="ng-scope" data-ng-animate="1">"

我试着跟随......

尝试 1. 把 <div ng-controller="childcontroller as vm">在 child.html 中 和 <div ng-controller="grandchildcontroller as vm">在 grandchildcontroller.html

我得到的错误是

Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- childcontroller <- childcontroller

at angular.js:138
at angular.js:4924
at Object.getService [as get] (angular.js:5084)
at angular.js:4929
at getService (angular.js:5084)
at injectionArgs (angular.js:5109)
at Object.invoke (angular.js:5133)
at $controllerInit (angular.js:11704)
at nodeLinkFn (angular.js:10517)
at compositeLinkFn (angular.js:9832)
"<div class="modal-content" modal-transclude="">"

尝试 2。<div ng-controller ="childcontroller as vm" ng-include="'......./child.html'"></div>在 parent.html 中。我得到与尝试 1 相同的错误。

Answer 1

为层次结构中的每个 Controller 分配不同的实例名称:

<div ng-controller="childcontroller as vm1"> 
    <div ng-controller="grandchildcontroller as vm2"> 

         <input ng-model="vm1.child">

         <input ng-model="vm2.grandchild">

    </div>
</div>

这使模板更加清晰，避免了潜在的数据隐藏问题。