एनजी-का उपयोग करते समय गुंजाइश खोना

Question

मेरे पास यह मॉड्यूल मार्ग हैं:

var mainModule = angular.module('lpConnect', []).
    config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/home', {template:'views/home.html', controller:HomeCtrl}).
        when('/admin', {template:'views/admin.html', controller:AdminCtrl}).
        otherwise({redirectTo:'/connect'});
}]);

होम HTML:

<div ng-include src="views.partial1"></div>

partial1 HTML:

<form ng-submit="addLine()">
    <input type="text" ng-model="lineText" size="30" placeholder="Type your message here">
</form>

HomeCtrl:

function HomeCtrl($scope, $location, $window, $http, Common) {
    ...
    $scope.views = {
        partial1:"views/partial1.html"
    };

    $scope.addLine = function () {
        $scope.chat.addLine($scope.lineText);
        $scope.lines.push({text:$scope.lineText});
        $scope.lineText = "";
    };
...
}

में addLineसमारोह $scope.lineTextहै undefined, इस जोड़कर हल किया जा सकता ng-controller="HomeCtrl"करने के लिए partial1.html, लेकिन यह नियंत्रक दो बार कहे जाने के कारण बनता है। मुझे यहां क्या समझ नहीं आ रहा है?

Answer 1

इसका कारण यह है कि ng-includeएक नया चाइल्ड स्कोप बनता है, इसलिए $scope.lineTextइसे बदला नहीं जाता है। मुझे लगता है कि thisवर्तमान गुंजाइश को संदर्भित करता है, इसलिए this.lineTextसेट किया जाना चाहिए।

Answer 2

जैसा कि @ रेनन ने उल्लेख किया है, एनजी-शामिल में एक नया बच्चा गुंजाइश है। यह दायरा प्रोटोटाइपिक रूप से विरासत में मिला है (नीचे धराशायी लाइनें देखें) ng-model="lineText"वास्तव में बच्चे के दायरे पर एक आदिम दायरे की संपत्ति बनाता है, न कि होमकटल के दायरे में। यह चाइल्ड स्कोप अभिभावक / होमकटल स्कोप के लिए सुलभ नहीं है:

उपयोगकर्ता ने HomeCtrl के $ गुंजाइश.lines सरणी में क्या टाइप किया है, इसे स्टोर करने के लिए, मेरा सुझाव है कि आप ऐडलाइन प्रोग्राम के मान को पास करें:

 <form ng-submit="addLine(lineText)">

इसके अलावा, चूंकि लाइनटेक्स्ट ngInclude गुंजाइश / आंशिक के स्वामित्व में है, मुझे लगता है कि इसे साफ़ करने के लिए ज़िम्मेदार होना चाहिए:

 <form ng-submit="addLine(lineText); lineText=''">

ऐडलाइन () इस प्रकार बनेगा:

$scope.addLine = function(lineText) {
    $scope.chat.addLine(lineText);
    $scope.lines.push({
        text: lineText
    });
};

फील करना ।

विकल्प:

• HomeCtrl के $ स्कोप पर एक ऑब्जेक्ट प्रॉपर्टी को परिभाषित करें, और आंशिक में इसका उपयोग करें ng-model="someObj.lineText:; बेला
• एक पहुँच बनाने के लिए / आंशिक उपयोग में $ माता-पिता: अनुशंसित नहीं है, यह एक हैक की अधिक है lineTextHomeCtrl $ गुंजाइश पर संपत्ति:   ng-model="$parent.lineText"; बेला

यह समझाने के लिए थोड़ा सा शामिल है कि उपरोक्त दो विकल्प क्यों काम करते हैं, लेकिन यह पूरी तरह से यहां बताया गया है: AngularJS में गुंजाइश प्रोटोटाइप / प्रोटोटाइप विरासत की बारीकियों क्या हैं?

मैं thisऐडलाइन () फ़ंक्शन का उपयोग करने की अनुशंसा नहीं करता। यह बहुत कम स्पष्ट हो पाता है कि किस दायरे तक पहुँचा जा रहा है / हेरफेर किया जा रहा है।

Comments

अंत में मैं समझ गया।

— स्कॉट टेस्लर

एक ही सवाल @ जेसे था, इसे हैक क्यों माना जाता है?

— qbert65536

@ qbert65536, यह अनिवार्य रूप से एक हैक / नाजुक है क्योंकि यदि आप अपने HTML का पुनर्गठन करते हैं, तो यह अब काम नहीं कर सकता है। उदाहरण के लिए, आपको $parent.$parent...इसे काम करने के लिए उपयोग करने की आवश्यकता हो सकती है । एक और तरीका रखो, $parentडोम संरचना के बारे में मान्यताओं का उपयोग करता है।

— मार्क राजकोक

@Jess 'लिंक को इस अंडरस्टैंडिंग स्कोप्स में बदल दिया गया है । पूरा पृष्ठ पढ़ें, यह बहुत अच्छा है।

— मरूनक्रूज़

यह एक शानदार विस्तृत उत्तर है, लेकिन मैंने बिना किसी सफलता के उन सभी को आजमाया। मेरे पास एक नियंत्रक के लिए कुछ इनपुट के साथ एक फॉर्म है और एक नियंत्रक के परिणाम को दूसरे div पर देखा जाना चाहिए। एक बार जब मैं किसी इनपुट में प्रवेश करता हूं तो सिंक्रोनाइजेशन खो जाएगा और ऐप चलने के दौरान व्यू डिव पर मेरे पास लगातार 0.00 मान होगा।

— ज़हरा

Answer 3

इसके बजाय thisस्वीकार किए गए उत्तर के रूप में उपयोग $parentकरने के बजाय सुझाव देते हैं । तो आपके partial1.htmlपास आपके पास होगा:

<form ng-submit="$parent.addLine()">
    <input type="text" ng-model="$parent.lineText" size="30" placeholder="Type your message here">
</form>

यदि आप दायरे में ng-includeया अन्य निर्देशों के बारे में अधिक जानना चाहते हैं , तो इसे देखें : https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-include

Comments

किसी भी पाठक के लिए, इसका मतलब है कि $scope.$parentइसके बजाय $parentकोणीय के अनुसार अपरिभाषित है।

— सेबेस्टियलोनो

यह जवाब मेरे लिए दिन बचाता है! $ माता-पिता के उपयोग को इंगित करने के लिए बहुत बहुत धन्यवाद।

— डेरेक वेब

$ गुंजाइश है। संदर्भ से $ पेरेंट पास? या यह सिर्फ माता-पिता की एक प्रति है?

— OMGPOP

@ सिबेस्तिलोनो गलत है। $ गुंजाइश। $ parent.lineText अपरिभाषित है। $ parent.lineText काम कर रहा है, यह .line या बस LineText भी काम कर रहा है

— OMGPOP

यह $scope.$parentमेरे लिए काम करता है कोणीय 1.3.20

— रेडटेक

Answer 4

मुझे पता चला है कि माता-पिता और उप-गुंजाइश डेटा को मिलाए बिना इस मुद्दे के आसपास कैसे काम किया जाए। तत्व ng-ifपर सेट करें ng-includeऔर इसे एक गुंजाइश चर पर सेट करें । उदाहरण के लिए :

<div ng-include="{{ template }}" ng-if="show"/>

अपने नियंत्रक में, जब आपने अपने उप-दायरे में आवश्यक सभी डेटा सेट किया है, तो शो को सेट करें true। ng-includeइस पल में अपने दायरे में डेटा सेट कॉपी करें और अपने उप दायरे में यह सेट हो जाएगा।

अंगूठे का नियम गुंजाइश डेटा को कम करने के लिए है गुंजाइश गहरा है, अन्यथा आपके पास यह स्थिति है।

मैक्स

Comments

मैं एक समान मुद्दे के लिए इस दृष्टिकोण का उपयोग कर रहा हूं लेकिन यह सभी मामलों के लिए उचित नहीं है। विशेष रूप से जब आप चाहते हैं कि शामिल तत्व कभी छुप न जाए ...

— iSpithash