blocks|key|280959|text|您可以只有一个ng-view。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|280960|您可以通过多种方式更改其内容：ng-include、ng-switch或通过routeProvider映射不同的控制器和模板。|280961|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.angularjs.org/api/ng/directive/ngInclude|1|https://docs.angularjs.org/api/ng/directive/ngSwitch^0|7|7|0|F|A|Q|9|F|A|0|Q|9|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]|$9|12|A|13|1|14]]|E|$]]|$1|H|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

<p>You can have just one <code>ng-view</code>.  </p>

<p>You can change its content in several ways: <a href="https://docs.angularjs.org/api/ng/directive/ngInclude" rel="noreferrer"><code>ng-include</code></a>, <a href="https://docs.angularjs.org/api/ng/directive/ngSwitch" rel="noreferrer"><code>ng-switch</code></a> or mapping different controllers and templates through the routeProvider. </p>


blocks|key|64652|text|使用常规ng-view模块，您不能有多个动态模板。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|64653|但是，通过this+project可以做到这一点(查找ui-router)。|64654|entityMap|0|LINK|mutability|MUTABLE|url|http://angular-ui.github.io/^0|4|7|0|R|9|5|C|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>Using regular <code>ng-view</code> module you cannot have more than one dynamic template.</p>

<p>However, <a href="http://angular-ui.github.io/" rel="noreferrer">this project</a> enables you to do so (look for <code>ui-router</code>).</p>


blocks|key|64693|text|我相信你可以通过只有一个ng-view来完成它。在主模板中，您可以拥有子视图的ng-include部分，然后在主控制器中定义每个子模板的模型属性。以便它们将自动绑定到ng-include部分。这与拥有多个ng-view是一样的|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|64694|您可以查看ng-include+documentation中给出的示例|64695|在本例中，当您从下拉列表中更改模板时，它会更改内容。这里假设您有一个主ng-view，并且不是通过选择下拉列表来手动选择子内容，而是在加载主视图时执行此操作。|64696|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.angularjs.org/api/ng/directive/ngInclude^0|C|7|13|A|2B|A|2U|7|0|5|A|G|D|0|0|Z|7|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|H|3|I|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

<p>I believe you can accomplish it by just having single <code>ng-view</code>. In the main template you can have <code>ng-include</code> sections for sub views, then in the main controller define model properties for each sub template. So that they will bind automatically to <code>ng-include</code> sections. This is same as having multiple <code>ng-view</code> </p>

<p>You can check the example given in <code>ng-include</code>  <a href="https://docs.angularjs.org/api/ng/directive/ngInclude">documentation</a></p>

<p>in the example when you change the template from dropdown list it changes the content. Here assume you have one main <code>ng-view</code> and instead of manually selecting sub content by selecting drop down, you do it as when main view is loaded.</p>


blocks|key|281065|text|可以有多个或嵌套的视图。但不是通过ng-view。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|281066|angular中的主路由模块不支持多视图。但是你可以使用ui-router。这是一个第三方模块，你可以通过Github，angular-ui/ui-router，https://github.com/angular-ui/ui-router获得。此外，目前正在开发新版本的ngRouter+(ngNewRouter)。目前还不稳定。所以我给你提供一个简单的ui-router启动示例。使用它，您可以命名视图并指定应该使用哪些模板和控制器来呈现它们。使用$stateProvider时，您应该指定如何为特定状态呈现视图占位符。|offset|length|281067|<body+ng-app="main">
++++<script+type="text/javascript">
++++angular.module('main',+['ui.router'])
++++.config(['$locationProvider',+'$stateProvider',+function+($locationProvider,+$stateProvider)+{
++++++++$stateProvider
++++++++.state('home',+{
++++++++++++url:+'/',
++++++++++++views:+{
++++++++++++++++'header':+{
++++++++++++++++++++templateUrl:+'/app/header.html'
++++++++++++++++},
++++++++++++++++'content':+{
++++++++++++++++++++templateUrl:+'/app/content.html'
++++++++++++++++}
++++++++++++}
++++++++});
++++}]);
++++</script>
++++<a+ui-sref="home">home</a>
++++<div+ui-view="header">header</div>
++++<div+ui-view="content">content</div>
++++<div+ui-view="bottom">footer</div>
++++<script+src="bower_components/angular/angular.js"></script>
++++<script+src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>|code-block|syntax|javascript|281068|对于这个示例，您需要引用angularjs和angular-ui.router。|281069|$+bower+install+angular-ui-router|281070|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular-ui/ui-router^0|0|29|13|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>It is possible to have multiple or nested views. But not by ng-view. </p>

<p>The primary routing module in angular does not support multiple views.
But you can use ui-router. This is a third party module which you can get via Github, angular-ui/ui-router, <a href="https://github.com/angular-ui/ui-router" rel="noreferrer">https://github.com/angular-ui/ui-router</a> . Also a new version of ngRouter (ngNewRouter) currently, is being developed. It is not stable at the moment.
So I provide you a simple start up example with ui-router.
Using it you can name views and specify which templates and controllers should be used for rendering them. Using $stateProvider you should specify how view placeholders should be rendered for specific state.</p>

<pre><code>&lt;body ng-app="main"&gt;
    &lt;script type="text/javascript"&gt;
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    &lt;/script&gt;
    &lt;a ui-sref="home"&gt;home&lt;/a&gt;
    &lt;div ui-view="header"&gt;header&lt;/div&gt;
    &lt;div ui-view="content"&gt;content&lt;/div&gt;
    &lt;div ui-view="bottom"&gt;footer&lt;/div&gt;
    &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
    &lt;script src="bower_components/angular-ui-router/release/angular-ui-router.js"&gt;
&lt;/body&gt;
</code></pre>

<p>You need referencing angularjs, and angular-ui.router for this sample.</p>

<pre><code>$ bower install angular-ui-router
</code></pre>


blocks|key|64749|text|你不能有多个ng-view。下面是我的用例，我解决了我的需求。我希望在我的模型对话框中有选项卡式的行为。我遇到了问题，因为单击具有超链接的选项卡将调用路由器链接。我用标签的按钮和css解决了这个问题。当用户点击tab时，它实际上不会调用任何总是调用ng-router的超链接。当用户单击选项卡时，它将调用一个方法，其中动态加载html。以下是单击选项卡时的功能|type|unstyled|depth|inlineStyleRanges|entityRanges|data|64750|self.submit+=+function(form)+{
++++++++++++++++$templateRequest('resources/items/employee/test_template.html').then(function(template){
++++++++++++++++var+compiledeHTML+=+$compile(template)($scope);
++++++++++++++++$("#d").replaceWith(compiledeHTML);
});|code-block|syntax|javascript|64751|用户$templateRequest。在test_template.html页面中添加您html内容。此html内容将绑定到您的控制器。|64752|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You cant have multiple ng-view. Below is my use case where I solved my requirement.
I wanted to have tabbed behavior in my model dialog. I was facing issue as click on tabs having hyperlink which will invoke router links. I solved this using button and css for tabs. When user clicks on tab, it actually will not call any hyperlink which will always invoke the ng-router. When user click on tab it will call a method, where I dynamcilly load html. Below is the function on click of tab</p>

<pre><code>self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});
</code></pre>

<p>User $templateRequest. In test_template.html page add your html content. This html content will be bind to your controller.</p>


<p>I am building a dynamic web app by using AngularJS. Is it possible to have multiple <code>ng-view</code> on a single template?</p>


AngularJS - Multiple ng-view in single template

路由器

路由

我正在使用AngularJS构建一个动态web应用程序。在一个模板上可以有多个ng-view吗？

问AngularJS -单个模板中的多个ng-view
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS -单个模板中的多个ng-viewEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS -单个模板中的多个ng-view
EN