नियंत्रक से कोणीय कॉल निर्देश

Question

मेरे पास क्लिक पर फ़ंक्शन के निष्पादन की पुष्टि करने के लिए पॉपअप दिखाने के लिए निम्न निर्देश है।

अब मैं एक पॉपअप दिखाने के लिए इसे अपने नियंत्रक के भीतर उपयोग करना चाहूंगा यदि किसी ऑब्जेक्ट के गुण बदल दिए गए हैं और उपयोगकर्ता पहले ऑब्जेक्ट को सहेजे बिना स्थान बदलना चाहता है। क्या यह संभव है?

angular.module('app.confirm', [ 
    'ui.bootstrap', 
    'template/modal/confirm.html', 
]) 

.controller('ConfirmModalController', ['$scope', '$modalInstance', function($scope, $modalInstance) { 
    $scope.confirm = function() { 
     $modalInstance.close(); 
    }; 

    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
}]) 

.directive('confirm', ['$modal', function($modal) { 
    return { 
     restrict: 'A', 
     scope: { 
      confirm: '&', 
      title: '@confirmTitle', 
      message: '@confirmMessage', 
      confirmButtonText: '@confirmButtonText', 
      cancelButtonText: '@cancelButtonText' 
     }, 
     link: function(scope, element, attributes) { 
      element.bind('click', function() { 
       var modal= $modal.open({ 
        controller: 'ConfirmModalController', 
        templateUrl: 'template/modal/confirm.html', 
        size: 'sm', 
        scope: scope 
       }); 

       modal.result.then(function() { 
        scope.confirm(); 
       }, function() { 
        // Modal dismissed 
       }); 
      }); 
     } 
    }; 
}]); 

angular.module('template/modal/confirm.html', []).run(['$templateCache', function($templateCache) { 
    $templateCache.put(
     'template/modal/confirm.html', 
     '<div class="modal-header" ng-show="title">' + 
      '<strong class="modal-title">{{title}}</strong>' + 
     '</div>' + 
     '<div class="modal-body">' + 
      '{{message}}' + 
     '</div>' + 
     '<div class="modal-footer">' + 
      '<a href="javascript:;" class="btn btn-link pull-left" ng-click="cancel()">{{cancelButtonText}}</a>' + 
      '<button class="btn btn-danger" ng-click="confirm()">{{confirmButtonText}}</button>' + 
     '</div>' 
    ); 
}]); 

आप ऐसे ही इसका इस्तेमाल कर सकते हैं:

<button 
    confirm="delete(id)" 
    confirm-title="Really?" 
    confirm-message="Really delete?" 
    confirm-button-text="Delete" 
    cancel-button-text="Cancel" 
    class="btn btn-danger" 
> 
    Delete 
</button> 

Answer 1

आप अपने निर्देश में एक गुंजाइश संपत्ति में बदलाव के लिए देख सकते हैं।

उदाहरण के लिए, जोड़ने के एक confirm-show-when

<button 
    confirm="delete(id)" 
    ... 
    confirm-show-when="state.showConfirmDialog" 
    ... 
> 
    Delete 
</button> 

अपने निर्देश परिभाषा

.directive('confirm', ['$modal', function($modal) { 
    return { 
     restrict: 'A', 
     scope: { 
      confirm: '&', 
      title: '@confirmTitle', 
      message: '@confirmMessage', 
      confirmButtonText: '@confirmButtonText', 
      cancelButtonText: '@cancelButtonText', 
      showWhen: '=confirmShowWhen' 
     }, 
     link: function(scope, element, attributes) { 
      var showModal = function() { 
       var modal= $modal.open({ 
        controller: 'ConfirmModalController', 
        templateUrl: 'template/modal/confirm.html', 
        size: 'sm', 
        scope: scope 
       }); 

       modal.result.then(function() { 
        scope.confirm(); 
       }, function() { 
        // Modal dismissed 
        // set showWhen back to false 
        scope.showWhen = false; 
       }); 
      }; 
      element.bind('click', showModal); 
      scope.$watch('showWhen', function(newVal) { 
       if (newVal) {showModal()}; 
      }); 
     } 
    }; 
}]); 

और अपने नियंत्रक में सिर्फ showConfirmDialog सही पर सेट यह जोड़े जब आप इसे दिखाना चाहते हैं।

// controller code 
// set up the state object so we use the 'dot' notation 
$scope.state = { showConfirmDialog: false }; 
// other controller code 
if (userWantsToDelete) { 
    $scope.state.showConfirmDialog = true; 
} 

Answer 2

N0- $ घड़ी समाधान:

1.
एक कॉलबैक जो अपने निर्देश से एक उजागर इंटरफ़ेस प्राप्त करता है के साथ अपने नियंत्रक प्रदान करें। आपका नियंत्रक इंटरफ़ेस को पकड़ता है और स्क्रिप्ट में इसका उपयोग करता है हालांकि यह चाहता है। सरल और किसी भी मौजूदा निर्देश पर लागू किया जा सकता है।

Plnkr for interface callback

app.directive("simpleDialog",function(simpleDialog){ 
    return{ 
     template:"<button ng-click='open()'>open from directive</button>", 
     scope:{ 
     onInit : "&onInit" 
     }, 
     link: function(scope){ 
     scope.open = simpleDialog.open; 
     scope.onInit({interface:{open:scope.open}}); 
     } 
    } 
    }); 

और अधिक जटिल है, लेकिन एक उत्कृष्ट पैटर्न ...

2.
कार्यान्वयन के लिए मैं सुझाव है कि आप एक निर्देश जो भी एक प्रोग्राम इंटरफ़ेस तो है करना चाहते हैं एक प्रदाता के रूप में निर्देश का मूल। फिर आप प्रदाता के आधार पर अपना निर्देश लागू कर सकते हैं और ऐसे मामलों में जहां आप स्क्रिप्ट के माध्यम से पूरी तरह से समान कार्यक्षमता तक पहुंचना चाहते थे, आप सीधे अपने नियंत्रक में इंजेक्शन करके प्रदाता पर काम कर सकते हैं।

यह क्रियान्वयन रणनीति ngDialog

के बाद इसके अलावा, के रूप में आप एक पुष्टिकरण संवाद बना रहे हैं कर रहे हैं तो आप इस पैटर्न उपयोगी पाते हैं के रूप में अपने खुले विधि एक वादा जो या सुलझाया जा सकता है अपने संवाद द्वारा अस्वीकार कर दिया लौट सकता है अपने नियंत्रक को वादे के आधार पर जवाब देने की अनुमति देता है।

PLNKR DEMO

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    
 
    </head> 
 

 
    <body ng-controller="myCtrl"> 
 
    
 
    <h1>Exposing a Directive interface to a controller</h1> 
 
    <div simple-dialog on-init="initCallback(interface)"></div> 
 
    <p><button ng-click="open()">Open from controller</button></p> 
 
    <p><button ng-click="open2()">Open from Exposed interface</button></p> 
 
    
 
    <script> 
 
     
 
     
 
     var app = angular.module("app",[]); 
 
     
 
     app.controller("myCtrl",function(simpleDialog,$scope){ 
 
     $scope.open = simpleDialog.open; 
 
     $scope.open2 = function(){ 
 
      this.interface.open(); 
 
     } 
 
     $scope.initCallback = function(interface){ 
 
      this.interface = interface; 
 
     } 
 
     }); 
 
     
 
    
 
     app.provider("simpleDialog",function(){ 
 
     
 
     this.$get = function(){ 
 
      
 
      var publicMethods={ 
 
      open:function(){ 
 
       alert("Impelment Dialog Here"); 
 
      } 
 
      } 
 
      
 
      return publicMethods; 
 
      
 
     } 
 
     }); 
 
     
 
     app.directive("simpleDialog",function(simpleDialog){ 
 
     return{ 
 
      template:"<button ng-click='open()'>open from directive</button>", 
 
      scope:{ 
 
      onInit : "&onInit" 
 
      }, 
 
      link: function(scope){ 
 
      scope.open = simpleDialog.open; 
 
      scope.onInit({interface:{open:scope.open}}); 
 
      } 
 
     } 
 
     }); 
 
     
 
     angular.bootstrap(document,["app"]); 
 
     
 
    </script> 
 
    </body> 
 
</html>