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



Answers

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

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

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

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

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

फ़ंक्शन ऐडलाइन () इस प्रकार बन जाएगा:

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

Fiddle

विकल्प:

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

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

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

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'});
}]);

होम एचटीएमएल:

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

partial1 एचटीएमएल:

<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 जोड़कर हल किया जा सकता है, हालांकि यह नियंत्रक को दो बार बुलाया जाता है। मुझे यहां क्या समझ नहीं आ रहा है?




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

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

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

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

मैक्स




Links