इस

Question

जैसे मोडल को संभालने का एंगुलरजेएस तरीका क्या है, मुझे पता है कि आपको अपने डिस्प्ले लॉजिक को नियंत्रक के अंदर नहीं रखना चाहिए और मैं इस दृष्टिकोण के लिए उचित AngularJS तरीके से संघर्ष कर रहा हूं।

मैं मॉडलों के अंदर फॉर्म प्रस्तुत कर रहा हूं। मैं मॉडल के लिए ज़र्ब फाउंडेशन के खुलासे का उपयोग कर रहा हूं।

मार्कअप:

<div class="button" ng-click="modalAddWidget">Add Widget</div> 
<div id="modalAddWidget" class="reveal-modal"> 
    <h6>New Widget</h6> 
    <form> 
    <fieldset> 
     <legend>Widget Name</legend> 
     <input type="text" ng-model="ui.add_widget_value" /> 
    </fieldset> 
    <div class="small button right" ng-click="addWidget()">Add Widget</div> 
    <div class="small button right secondary" ng-click="addWidgetCancel()">Cancel</div> 
    </form> 
</div> 

नियंत्रक:

... 
    $scope.modalAddWidget = function() { 
    $("#modalAddWidget").reveal(); 
    } 
    $scope.addWidget = function() { 
    $scope.myobject.widgets.push({"name": $scope.ui.add_widget_value}); 
    $scope.ui.add_widget_value = ''; 
    $('#modalAddWidget').trigger('reveal:close'); 
    } 
    $scope.addBudgetCancel = function() { 
    $scope.ui.add_widget_value = ''; 
    $('#modalAddWidget').trigger('reveal:close'); 
    } 
    ... 

नोट: $ scope.ui एक वस्तु मैं यूआई मूल्यों है कि उपयोगकर्ता जब तक मेरी वस्तु के लिए बाध्य नहीं किया जाना चाहिए स्टोर करने के लिए उपयोग कर रहा हूँ है वास्तव में "विजेट जोड़ें" पर क्लिक करता है

$ scope.myobj वह जगह है जहां मेरा डेटा संग्रहीत किया जाता है।

फाउंडेशन $("#modalAddWidget").reveal(); फ़ंक्शन मोडल ओवरले प्रस्तुत करता है।

चूंकि मुझे नियंत्रक के अंदर अपना डिस्प्ले कोड नहीं डालना चाहिए, इस तक पहुंचने का उचित तरीका क्या है?

Answer 1

आप अपने नियंत्रकों से डीओएम (या यहां तक ​​कि संदर्भ भी) में हेरफेर नहीं करना चाहते हैं।

एक निर्देश यहां सर्वोत्तम है।

app.directive('revealModal', function(){ 
    return function(scope, elem, attrs) { 
    scope.$watch(attrs.revealModal, function(val) { 
     if(val) {   
      elem.trigger('reveal:open'); 
     } else { 
      elem.trigger('reveal:close'); 
     } 
    }); 
    elem.reveal(); 
    } 
}); 

फिर अपने नियंत्रक में:

$scope.modalAddWidget = function(){ 
    $scope.ui = { add_widget_value: '' }; 
    $scope.showModal = true; 
}; 

$scope.addWidget = function(){ 
    $scope.myobject.widgets.push({"name": $scope.ui.add_widget_value}); 
    $scope.ui.add_widget_value = ''; 
    $scope.showModal = true; 
}; 

और अपने HTML

<div class="button" ng-click="modalAddWidget()">Add Widget</div> 
<div id="modalAddWidget" class="reveal-modal" reveal-modal="showModal"> 
    <h6>New Widget</h6> 
    <form name="addWidgetForm" ng-submit="addWidget()"> 
    <fieldset> 
     <legend>Widget Name</legend> 
     <input type="text" name="widgetValue" ng-model="ui.add_widget_value" required /> 
     <span ng-show="addWidgetForm.widgetValue.$error.required">required</span> 
    </fieldset> 
    <button type="submit" class="small button right">Add Widget</button> 
    <div class="small button right secondary" ng-click="showModal = false;">Cancel</div> 
    </form> 
</div> 

मूल रूप से आप दिखाने के लिए और अपने मॉडल को छिपाने के लिए अपने दायरे में एक बूलियन सेट करेंगे में। (मुझे मोडल के खुले/बंद तंत्र को प्रकट करने के बारे में निश्चित नहीं है, इसलिए मैं उपरोक्त मेरे कोड में अनुमान लगा रहा हूं)।

ALSO: मैं वहां कुछ सत्यापन जोड़ने के प्रयास के माध्यम से चला गया।