Изменение содержимого ng-include с помощью ng-click внутри ng-include, которое я хочу изменить

У меня есть настройка шаблона с навигацией вверху, а навигационные ссылки выглядят так:

<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
person jdgower    schedule 26.07.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

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>

Живое демо

Есть два способа решить эту проблему. Один из них - использовать $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>

Живое демо

Другой - привязать к объекту вместо примитива, такого как строка...

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

Живое демо

Для получения дополнительной информации ознакомьтесь с этим ответом о прототипном наследовании в Angular.

person Anthony Chu    schedule 26.07.2014
comment
Это спасло меня! Спасибо за публикацию! - person fauverism; 17.09.2014