Question

我试图在stackoverflow和google上找到解决这个问题的方法，但无法找到它。问题是在同一页面上使用相同的控制器两次，并且只调用第一个控制器提及。

所以我有一个基本模板和主页面。现在主页继承了两个完全不同的块 - 侧边栏块和主要内容块。两者都需要我的控制器 - myController，但是当我在页面上使用ngController和相同的控制器名称两次这两个完全不同的div时，只有第一个被执行。

要点：https://gist.github.com/keshavagrawal89/356bb68068ac3ed4ae4e#file-samecontroller

<!-- base.html -->

<div>{% block sidebar %}{% endblock %}</div>

<div>{% block content %}{% endblock %}</div>


<!-- MainPage.html -->

{% block sidebar %}
    <ul ng-app="myApp" ng-controller="myController">
        <li></li>
    </ul>
{% endblock %}

{% block content %}
    <div ng-app="myApp" ng-controller="myController"> my page content</div>
{% endblock %}

我错过了什么？

Answer 1

您不能在同一个应用程序中使用多个ng-apps。理想情况下，您只需将其放在应用程序的根目录中，或创建包含多个应用程序的应用程序并将其放在根目录中，在下面的示例中，在这两个应用程序中注册的所有实体都将加载到myApp模块中。

前： -

 angular.module('myApp', ['App1', 'App2']);

但在您的情况下，您的应用似乎可能相同或不同，所以最好的方法是manually bootstrap your app。

但请记住，在手动引导您的应用时，通常不会使用ng-app

angular.element().ready(function() {
   angular.bootstrap(elmRoot, ['myApp']);
});

<强> Plnkr

注意：手动引导应用时，不应使用ng-app指令。

Answer 2

你的代码唯一的问题是多个ng-app，正如PSL在评论中说的那样。 ng-app声明了angularjs要解析的DOM对象的范围，它应该使用一次

通常在html标签中，如

<html ng-app="app"> or <html ng-app>

我推荐使用app模块的名称

here is a working example

在相同页面上使用相同的角度js控制器两次使用django模板

2 个答案: