AngularJS ngInclude動態地改變其位置

我在那裏的位置是通過基於改變用戶操作的幾個部分模板NG點擊：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}」等嘗試了一些簡單的實驗（認爲這是因爲我使用原始類型和複製不引用是問題），但它不是'工作......但簡單的點符號是好的......我個人認爲它是在發佈時星期五下午;） – Steve

AngularJS ngInclude動態地改變其位置

回答

相關問題