文章/答案/技术大牛

发布

社区首页 >问答首页 >如何嵌套angularjs控制器和指令？

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

Stack Overflow用户

提问于 2019-04-14 17:22:07

回答 1查看 67关注 0票数 0

如果我像这样嵌套我的控制器：

<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)，而其他两个控制器无法正确加载？

javascript

html

angularjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-15 00:58:16

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

<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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55673746

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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