AngularJS ngInclude динамически изменяя его местоположение

У меня есть несколько частичных шаблонов, где расположение изменяется на основе действий пользователя с помощью нг-клик:AngularJS ngInclude динамически изменяя его местоположение

<div ng-include="contentUrl"></div> 

<button ng-click="contentUrl = '../partials/testScriptForm.html'">Add Test Script</button>

Это прекрасно работает, если я выше кнопка не находится внутри парциального себя , так что если testScriptForm.html имеет кнопку:

<button ng-click="contentUrl = '../partials/testScriptCase.html'">Add Test Case</button>

Тогда ничего не происходит.

Это связано с тем, что ng-include получает новую (унаследованную, но не общую?) Область.

Что я не могу понять, так это то, как получить включенный шаблон (частичный), чтобы изменить свое местоположение.

Я попытался использовать функцию для изменения $ scope. $ Parent.contentUrl, похоже, что она изменяет, но не «размножает» изменения.

В CoffeeScript:

$scope.changeParentLocation = (location) -> 
     $scope.$parent.contentUrl = location

также попытался $ объема $ применить() и $ сферы $ родительских $ применяются() там и получают ошибку:...

Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.0rc1/ $rootScope/inprog?p0=%24apply

Может быть Я просто неправильно используя включает в себя ...

источник

2013-09-27 Steve

Попробуйте использовать объект ' "content.Url = 'someFile.html'"' вместо того, чтобы просто ' "contentUrl = 'someFile.html'"' – AlwaysALearner

Спасибо! Я пытался выяснить, почему ng-click не может изменить включенный шаблон и никогда бы не догадался, что это связано с новой областью. – Sonata

побег изолированный объем с «точечно модель» ссылка:

<html ng-app> 
    <head> 
    <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script> 
    <script src="script.js"></script> 

    <script type="text/ng-template" charset="utf-8" id="/partials/testScriptForm.html"> 
     <h1>This is testScriptForm.html</h1> 
     <button ng-click="tpl.contentUrl = '/partials/testScriptCase.html'">Change to Test Case</button> 
    </script> 

    <script type="text/ng-template" charset="utf-8" id="/partials/testScriptCase.html"> 
     <h1>This is testScriptCase.html</h1> 
     <button ng-click="tpl.contentUrl = '/partials/testScriptForm.html'">Change to Test Form</button> 
    </script> 

    </head> 
    <body> 

    <div ng-controller="Ctrl"> 

     <fieldset> 
     <div ng-include="tpl.contentUrl"></div> 
     </fieldset> 

    </div> 

    </body> 
</html>

function Ctrl($scope) { 
    $scope.tpl = {}; 
    $scope.tpl.contentUrl = '/partials/testScriptForm.html'; 
}

источник

2013-09-27 07:42:26 Stewie

Я думаю, что это требует короткого объяснения. Это на самом деле связано с тем, как JavaScript копирует вещи. Без точки мы ссылаемся на скалярную переменную. Если JavaScript делает копию этого, это просто та копия. Любые изменения, внесенные в копию, не отразятся на оригинале. С другой стороны: если есть точка, то «копия» не является скалярной переменной, а объектом (tpl в ответе). И объект «скопирован» по ссылке, поэтому скопированный tpl будет по-прежнему указывать на исходный объект, т. Е. Tpl.whatever изменит tpl.whatever на «оригинал», а также. –

Благодаря всем респондентам, которые полностью решили это, и объяснение имеет смысл. Фактически я пробовал некоторые простые эксперименты (думая, что это было потому, что я использовал примитивный тип, и копирование, не связанное с этим, было проблемой), используя кнопки ng-click = "shared = {prop: 1}" и т. Д. На кнопках, но это wasn ' t работает ... но простая точечная нотация хороша ... лично я обвиняю ее в том, что я был в пятницу днем во время публикации;) – Steve

AngularJS ngInclude динамически изменяя его местоположение

ответ

Смежные вопросы