2013-09-27 9 views
6

मैं कुछ आंशिक टेम्पलेट्स जहां स्थान के माध्यम से उपयोगकर्ता क्रियाओं के आधार पर बदल रहा है बदल रहा है ngInclude एनजी-क्लिक करें:AngularJS गतिशील इसके स्थान

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

तब कुछ भी नहीं होता है।

ऐसा लगता है कि इसमें नया (विरासत में मिला लेकिन साझा नहीं किया गया) स्कोप शामिल है।

मुझे यह नहीं पता कि मैं अपना खुद का स्थान बदलने के लिए शामिल टेम्पलेट (आंशिक) कैसे प्राप्त कर सकता हूं।

मैंने $ स्कोप बदलने के लिए एक फ़ंक्शन का प्रयास किया। $ Parent.contentUrl, ऐसा लगता है कि यह परिवर्तन प्रतीत होता है लेकिन परिवर्तनों को "प्रसारित नहीं करता"।

coffeescript में:

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

भी गुंजाइश डॉलर तक की कोशिश की $ (लागू) और $ गुंजाइश $ माता पिता $() वहाँ में लागू करते हैं और त्रुटि मिलती है:।।। हो सकता है कि

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

मैं सिर्फ गलत उपयोग किया जाना ...

+1

बस का एक उद्देश्य 'उपयोग करने का प्रयास" content.Url = 'someFile.html' "' बजाय '" contentUrl = 'someFile.html' "' – AlwaysALearner

+0

धन्यवाद! मैं यह पता लगाने की कोशिश कर रहा था कि क्यों एनजी-क्लिक शामिल टेम्पलेट को बदल नहीं सकता था और कभी अनुमान लगाया नहीं था कि यह एक नए दायरे के कारण था .. – Sonata

उत्तर

7

के साथ "बिंदीदार मॉडल" संदर्भ से अलग-थलग गुंजाइश एस्केप:

<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'; 
} 
+4

मुझे लगता है कि इसे एक संक्षिप्त स्पष्टीकरण की आवश्यकता है। वास्तव में यह करना है कि जावास्क्रिप्ट चीजों की प्रतिलिपि कैसे करेगा। डॉट के बिना, हम एक स्केलर चर का संदर्भ दे रहे हैं। अगर जावास्क्रिप्ट उस की एक प्रति बनाता है, तो यह सिर्फ एक प्रति है। प्रतिलिपि में किए गए कोई भी परिवर्तन मूल पर प्रतिबिंबित नहीं होंगे। दूसरी तरफ: यदि कोई बिंदु है, तो "प्रतिलिपि" स्केलर चर का नहीं है लेकिन एक ऑब्जेक्ट (उत्तर में tpl) है। और एक वस्तु संदर्भ द्वारा "प्रतिलिपि बनाई गई" है, इस प्रकार प्रतिलिपि बनाई गई टीपीएल अभी भी मूल वस्तु को इंगित करेगी, इस प्रकार tpl. जो भी "मूल" पर भी tpl.wh भी बदल जाएगा। –

+0

उन सभी उत्तरदाताओं के लिए धन्यवाद जिन्होंने इसे पूरी तरह से हल किया और स्पष्टीकरण सही समझ में आता है। असल में मैंने बटनों पर एनजी-क्लिक = "साझा = {प्रोप: 1}" आदि का उपयोग करके कुछ सरल प्रयोगों की कोशिश की थी (ऐसा सोच रहा था क्योंकि मैं एक आदिम प्रकार का उपयोग कर रहा था और प्रतिलिपि नहीं कर रहा था) लेकिन यह ' टी काम नहीं कर रहा है ... लेकिन साधारण डॉट नोटेशन अच्छा है ... व्यक्तिगत रूप से मैं पोस्टिंग के समय शुक्रवार दोपहर को दोषी ठहराता हूं;) – Steve

संबंधित मुद्दे