एंगुलरजेएस - बाल निर्देशों से माता-पिता निर्देश गुणों तक पहुंच

यह करना मुश्किल नहीं होना चाहिए, लेकिन मैं यह नहीं समझ सकता कि इसे कैसे करना है।एंगुलरजेएस - बाल निर्देशों से माता-पिता निर्देश गुणों तक पहुंच

मैं एक माता पिता के निर्देश है, तो जैसे:

directive('editableFieldset', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     model: '=' 
    }, 
    replace: true, 
    transclude: true, 

    template: ' 
     <div class="editable-fieldset" ng-click="edit()"> 
     <div ng-transclude></div> 

     ... 

     </div>', 

    controller: ['$scope', function ($scope) { 
     $scope.edit = -> 
     $scope.editing = true 

     // ... 
    ] 
    }; 
});

और एक बच्चे के निर्देश:

.directive('editableString', function() { 
    return { 
    restrict: 'E', 
    replace: true, 

    template: function (element, attrs) { 
     '<div> 
     <label>' + attrs.label + '</label> 
     <p>{{ model.' + attrs.field + ' }}</p> 

     ... 
     </div>' 
    }, 
    require: '^editableFieldset' 
    }; 
});

कैसे मैं आसानी से बच्चे के निर्देश से माता-पिता के निर्देश के model और editing गुण का उपयोग कर सकते ? मेरे लिंक फ़ंक्शन में मेरे पास मूल दायरे तक पहुंच है - क्या मुझे इन गुणों को देखने के लिए $watch का उपयोग करना चाहिए?

एकत्र किया गया, मैं क्या करना चाहते हैं यह है:

<editable-fieldset model="myModel"> 
    <editable-string label="Some Property" field="property"></editable-string> 
    <editable-string label="Some Property" field="property"></editable-string> 
</editable-fieldset>

विचार डिफ़ॉल्ट रूप से प्रदर्शित क्षेत्रों का एक सेट है। यदि क्लिक किया जाता है, तो वे इनपुट बन जाते हैं और संपादित किए जा सकते हैं।

स्रोत

2013-11-26 Rahul Sekhar

क्या आप अंतिम मार्कअप की तरह दिखने का उदाहरण दे सकते हैं? –

मैंने इसे अब –

this SO post से प्रेरणा लेते हुए, मुझे एक समाधान समाधान here in this plunker मिला है।

मुझे काफी बदलाव करना पड़ा। मैंने editableString पर एक अलग दायरा भी चुना है क्योंकि टेम्पलेट में सही मानों में बाध्य करना आसान था। अन्यथा, आपको compile या अन्य विधि का उपयोग करना होगा (जैसे $transclude सेवा)।

जे एस:

यहाँ परिणाम है

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

myApp.controller('Ctrl', function($scope) { 

    $scope.myModel = { property1: 'hello1', property2: 'hello2' } 

}); 


myApp.directive('editableFieldset', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     model: '=' 
    }, 
    transclude: true, 
    replace: true, 
    template: '<div class="editable-fieldset" ng-click="edit()"><div ng-transclude></div></div>', 
    link: function(scope, element) { 
     scope.edit = function() { 

     scope.editing = true; 
     } 
    }, 
    controller: ['$scope', function($scope) { 

     this.getModel = function() { 
     return $scope.model; 
     } 

    }] 
    }; 
}); 

myApp.directive('editableString', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     label: '@', 
     field: '@' 
    }, 
    template: '<div><label>{{ label }}</label><p>{{ model[field] }}</p></div>', 
    require: '^editableFieldset', 
    link: function(scope, element, attrs, ctrl) { 

     scope.model = ctrl.getModel(); 
    } 
    }; 
});

HTML:

<body ng-controller="Ctrl"> 
    <h1>Hello Plunker!</h1> 
    <editable-fieldset model="myModel"> 
     <editable-string label="Some Property1:" field="property1"></editable-string> 
     <editable-string label="Some Property2:" field="property2"></editable-string> 
    </editable-fieldset> 
    </body>

स्रोत

2013-11-26 11:14:14

में रखा है धन्यवाद। यह वास्तव में गतिशील प्रॉपर्टी तक पहुंचने में मदद नहीं करता है, जैसे 'संपादन'। मुझे लगता है कि मुझे अपने बच्चे के निर्देश में इसका ट्रैक रखने के लिए '$ watch' का उपयोग करना होगा? –

इसके अलावा, मैं 'फ़ील्ड' और 'लेबल' जैसे निरंतर, अपरिवर्तनीय विशेषताओं के बारे में सोचूंगा, उन्हें टेम्पलेट उत्पन्न करने वाले फ़ंक्शन को पास करने से उन्हें बाध्यकारी के रूप में जोड़ने से तेज़ होगा? उन बाध्यकारीों के लिए प्रत्येक पाचन चक्र की जांच पर समय बर्बाद करने की कोई आवश्यकता नहीं है जो बदलेगी नहीं, है ना? –

बच्चे की संपत्ति संपादित नहीं कर रहा है? या आप एक समय में केवल एक बच्चे को संपादित करना चाहते हैं? –

आप बच्चे को निर्देश लिंक समारोह में विशेषता पारित करके माता-पिता नियंत्रक से उपयोग कर सकते हैं

link: function (scope, element, attrs, parentCtrl) { 
    parentCtrl.$scope.editing = true; 
}

स्रोत

2013-11-26 11:15:04 user3036090

आपको यह चौथा param मिलता है यदि आप: ... की आवश्यकता है: "^ parentCtrl" – Leonardo

हां और अवधारणा निर्देशों के लिए प्रलेखन में "** डायरेक्टिव डायरेक्टिव्स डायरेक्टिव्स डायरेक्टिव्स" सेक्शन में बताया गया है [लिंक] (https : //docs.angularjs.org/guide/directive) – Harish

एंगुलरजेएस - बाल निर्देशों से माता-पिता निर्देश गुणों तक पहुंच

उत्तर

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