从 ng-include 中通过 ng-click 更改 ng-include 的内容我想更改答案

【问题标题】：Changing the content of ng-include from an ng-click from within the ng-include I want to change从 ng-include 中通过 ng-click 更改 ng-include 的内容我想更改
【发布时间】：2014-07-26 18:49:29
【问题描述】：

我有一个顶部带有导航的模板设置，导航链接如下：

<a href="" ng-click="subPage='views/customers/jobs.html'">Jobs</a>

这些链接改变了 ng-include 元素内部的内容：

<section data-ng-include="subPage" ng-init="subPage='views/customers/information.html'" ng-animate></section>

这很好用，但是在我将部分内容加载到 ng-include 后，添加如下链接：

<a href="" ng-click="subPage='views/customers/jobs.html'">Jobs</a>

对 ng-include 部分没有影响。我希望能够从元素内更改此元素的内容。知道我做错了什么吗？

【问题讨论】：

标签： angularjs

【解决方案1】：

ngInclude 创建一个子作用域，由于subPage 是一个原始类型（字符串），subPage='views/customers/jobs.html' 将更新子作用域的subPage 属性，但父作用域上的subPage 将是不受影响。

这可能与您现在的情况相似，链接不起作用...

<div ng-app ng-init="subPage = 'foo.html'">
    <div ng-include="subPage"></div>
    <script type="text/ng-template" id="foo.html">
        <div><h1>foo</h1>
            <a href="" ng-click="subPage='bar.html'">bar</a >
        </div>
    </script>
    <script type="text/ng-template" id="bar.html">
        <div><h1>bar</h1>
            <a href="" ng-click="subPage='foo.html'">foo</a >
        </div>
    </script>
</div>

Live Demo

有两种方法可以解决这个问题。一种是使用$parent...

<div ng-app ng-init="subPage = 'foo.html'">
    <div ng-include="subPage"></div>
    <script type="text/ng-template" id="foo.html">
        <div><h1>foo</h1>
            <a href="" ng-click="$parent.subPage='bar.html'">bar</a >
        </div>
    </script>
    <script type="text/ng-template" id="bar.html">
        <div><h1>bar</h1>
            <a href="" ng-click="$parent.subPage='foo.html'">foo</a >
        </div>
    </script>
</div>

Live Demo

另一种是绑定到对象而不是像字符串这样的原语...

<div ng-app ng-init="subPage.url = 'foo.html'">
    <div ng-include="subPage.url"></div>
    <script type="text/ng-template" id="foo.html">
        <div><h1>foo</h1>
            <a href="" ng-click="subPage.url='bar.html'">bar</a >
        </div>
    </script>
    <script type="text/ng-template" id="bar.html">
        <div><h1>bar</h1>
            <a href="" ng-click="subPage.url='foo.html'">foo</a >
        </div>
    </script>
</div>

Live Demo

欲了解更多信息，请查看this answer on prototypal inheritance in Angular。

【讨论】：

这救了我！感谢发帖！