Question

如果我这样嵌套控制器：

<body ng-app="app" ng-controller="ctrl">

    <div ng-controller="app-get">
        <app-get></app-get>
    </div>
    <div ng-controller="app-post">
        <app-post"></app-post>
    </div>
    <div ng-controller="app-update">
        <app-update></app-update>
    </div>

</body>

为什么应用程序仅能够解释第一个控制器（app-get），而其他两个无法正确加载？

Answer 1

您的标记中有错字，但是我不确定是否是问题所在，因为您没有共享任何其他代码：

<div ng-controller="app-post">
    <app-post"></app-post>
              \
               what's that double quote doing here?
</div>

无论如何，这是我写的一个简单代码段，以演示如何实现您要实现的布局：

angular.module('app', [])
  .controller('AppController', AppController)
  .controller('AppGetController', AppGetController)
  .controller('AppPostController', AppPostController)
  .controller('AppUpdateController', AppUpdateController)
  .directive('appGet', appGetDirective)
  .directive('appPost', appPostDirective)
  .directive('appUpdate', appUpdateDirective);

function AppController() {
  this.hello = 'Hello from AppController!';
}

function AppGetController() {
  this.hello = 'Hello from AppGetController!';
}

function AppPostController() {
  this.hello = 'Hello from AppPostController!';
}

function AppUpdateController() {
  this.hello = 'Hello from AppUpdateController!';
}

function appGetDirective() {
  return {
    template: '<h3>Hello from appGet directive!</h3>'
  };
}

function appPostDirective() {
  return {
    template: '<h3>Hello from appPost directive!</h3>'
  };
}

function appUpdateDirective() {
  return {
    template: '<h3>Hello from appUpdate directive!</h3>'
  };
}

html, body { margin: 0; padding: 0; }
body { background: #f3d250; padding: 10px; }
h1, h2, h3 { margin: 0; padding: 10px; }
h3 { background: #5da2d5; }
div { background: #f78888; margin: 10px; padding: 0 10px 10px; }

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  </head>
  <body ng-app="app" ng-controller="AppController as app">
    <h1>{{app.hello}}</h1>

    <div ng-controller="AppGetController as appGet">
      <h2>{{appGet.hello}}</h2>
      <app-get></app-get>
    </div>
    
    <div ng-controller="AppPostController as appPost">
      <h2>{{appPost.hello}}</h2>
      <app-post></app-post>
    </div>
    
    <div ng-controller="AppUpdateController as appUpdate">
      <h2>{{appUpdate.hello}}</h2>
      <app-update></app-update>
    </div>
  </body>
</html>

如何嵌套angularjs控制器和指令？

1 个答案: