कोणीय जेएस - लपेटने के निर्देश

Question

ऐसा लगता है जैसे मैं निर्देशों में अलग-अलग क्षेत्रों से उलझन में हूं और उम्मीद करता हूं कि आप मेरी मदद कर सकते हैं।

मैंने कोड डुप्लिकेशंस को कम करने के लिए एक नए निर्देश में कोड का एक टुकड़ा लपेटने की कोशिश की जिसमें कुछ कस्टम निर्देश शामिल हैं। स्पष्ट रूप से मुझे निर्देशों को पुन: प्रयोज्य बनाने के लिए पैरामीटर के रूप में मेरे नए निर्देश में ng-model जैसे कुछ विशेषताओं को देने की आवश्यकता थी। ng-model अभिव्यक्ति पसंद नहीं है हालांकि (मैंने पहले ng-model="{{myVariableWhichContainsDesiredNgModelString}}" को आजमाया) और इस प्रकार मैं इस आलेख पर समाप्त हुआ: AngularJS - Create a directive that uses ng-model।

जबकि स्वीकार्य उत्तर एक साधारण सेटअप के लिए काम करता प्रतीत होता है, मैंने प्लंबर को स्वीकार किए गए उत्तर से यह जांचने के लिए संपादित किया कि क्या यह नेस्टेड निर्देशों के साथ भी काम करेगा: (मेरे ऐप में मुझे किसी तीसरे पक्ष से निर्देश लपेटने की ज़रूरत है -पुस्तकालय जिसे मैं संपादित नहीं कर सकता) Plunker। मेरे कोड में प्रत्येक निर्देश स्कोप परिभाषा में = का उपयोग कर अपना स्वयं का दायरा और दो-तरफा-डाटाबेसिंग उत्पन्न करने लगता है, वांछित के रूप में काम नहीं कर रहा है।

संपादित करें: चूंकि यह स्पष्ट नहीं किया गया था मैं क्या पूछ रहा हूँ मैं ऊपर Plunker संपादित और सवाल अलग तरीके से व्यक्त करेंगे: Plunker में मैं तीन इनपुट क्षेत्रों जो एक ही मॉडल-मूल्य के लिए बाध्य करने वाले हैं की है। यह प्रारंभ में काम करता है, लेकिन जैसे ही मैं तीसरे इनपुट-फ़ील्ड को संपादित करता हूं, यह प्रारंभिक मूल्य को अपडेट करने के बजाय अपने अलग-अलग दायरे में अपना स्वयं का चर उत्पन्न करता है। स्पष्ट रूप से तीसरा इनपुट फ़ील्ड उस बिंदु से नए चर को संदर्भित करता है। मैं उस व्यवहार से कैसे बच सकता हूं और इनपुट को $scope.model.name से लिंक कर सकता हूं?

अवलोकन: उम्मीद के रूप में टेम्पलेट से अलग-गुंजाइश-निर्देश को दूर करने के लिए सब कुछ काम करता है ...

template: '<div><my-input ng-model="myDirectiveVar"></my-input></div>', 

बजाय

template: '<div><my-isolated-scope-directive><my-input ng-model="myDirectiveVar"></my-input></my-isolated-scope-directive></div>', 

Plunker

HTML:

<!-- this binds to the model which i would like all my inputs to bind to.--> 
<input ng-model="name"> 

<!-- Example 1: This seems to generate a new modelvalue in the isolated-scope directive. Can I avoid this without modifying that directive?--> 
<my-isolated-scope-directive><my-input ng-model="name"></my-input></my-isolated-scope-directive> 

<!-- Example 2: This is what i would like my code to look like in the end: One directive which uses the code-snippet of Example 1 as template and passes some parameters into that template.--> 
<my-wrapper-directive my-directive-var="name"></my-wrapper-directive> 

निर्देशों:

:

app.directive('myInput', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     require: 'ngModel', 
     template: '<input class="some">', 
     link: function($scope, elem, attr, ctrl) { 
      console.debug($scope); 
     } 
    }; 
}) 

my-isolated-scope-directive एक प्लेसहोल्डर-निर्देश का अपना अलग गुंजाइश नेस्टेड निर्देशों के लिए व्यवहार अनुकरण के साथ है:

my-input एक संशोधित इनपुट फ़ील्ड

.directive('myIsolatedScopeDirective', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     scope: { 
      something: '=' 
     }, 
     template: '<div ng-transclude></div>', 
     link: function($scope, elem, attr, ctrl) { 
      console.debug($scope); 
     } 
    }; 
}) 

my-wrapper-directive दोनों पिछले निर्देशों समाहित और एक पैरामीटर जो इनपुट क्षेत्र के एनजी मॉडल मूल्य के रूप में इस्तेमाल किया जाना चाहिए स्वीकार करता है: मैं क्या याद आ रही है की सराहना कर रहे हैं पर

.directive('myWrapperDirective', function() { 
    return { 
     restrict: 'E', 
     transclude: false, 
     replace: true, 
     scope: { 
      myDirectiveVar: '=' 
     }, 
     template: '<div><my-isolated-scope-directive><my-input ng-model="myDirectiveVar"></my-input></my-isolated-scope-directive></div>', 
     link: function($scope, elem, attr, ctrl) { 
      console.debug($scope); 
     } 
    }; 
}); 

कोई सुझाव और संकेत। क्या मैं किसी भी तरह से उस सेवा पर निर्भर निर्देश के बिना ng-model सेवा-आवृत्ति से लिंक कर सकता हूं?

Answer 1

मैं ऐसा नहीं करता क्योंकि यह स्कॉप्स का उपयोग कर पुराना नोटेशन है ...मैं का प्रयोग करेंगे controllerAs और bindToController

स्क्रिप्ट:

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function() { 
    this.model = { name: 'World' }; 
    this.name = "Felipe"; 
}); 

app.directive('myInput', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    // controllerAs: 'app', 
    require: 'ngModel', 
    template: '<input class="some">', 
    controller: function(){ 

    } 
    }; 
}) 
.directive('myIsolatedScopeDirective', function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    controllerAs: 'app1', 
    bindToController: { 
     something: '=' 
    }, 
    template: '<div ng-transclude></div>', 
    controller: function(){ 

    } 
    }; 
}) 
.directive('myWrapperDirective', function() { 
    return { 
    restrict: 'E', 
    transclude: false, 
    controllerAs: 'app2', 
    bindToController: { 
     myDirectiveVar: '=' 
    }, 
    template: '<div><my-isolated-scope-directive>'+ 
     '<my-input ng-model="app2.myDirectiveVar"></my-input>'+ 
     '</my-isolated-scope-directive></div>', 
    controller: function(){ 

    } 

    }; 
}); 

सूचकांक:, http://plnkr.co/edit/VD0wXO1jivQc3JvfQFTh?p=preview

अद्यतन हाँ, अच्छा बिंदु इसलिए यदि आप चाहते हैं:

<!doctype html> 
<html ng-app="plunker" > 
<head> 
    <meta charset="utf-8"> 
    <title>AngularJS Plunker</title> 
    <link rel="stylesheet" href="style.css"> 
    <script>document.write("<base href=\"" + document.location + "\" />");</script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-controller="MainCtrl as main"> 
    This scope value 
    <input ng-model="main.model.name"> 
    <my-isolated-scope-directive> 
    <my-input ng-model="main.model.name"></my-input> 
    </my-isolated-scope-directive> 
    <my-wrapper-directive my-directive-var="main.model.name"> 
    </my-wrapper-directive> 
</body> 
</html> 

plunker देखें नियंत्रक का उपयोग करें, आपको न्यूनतम के रूप में कोणीय 1.2 की आवश्यकता है, bindToController के लिए आपको कोणीय की आवश्यकता है 1.3