javascript कोणीय 1.5 में ui.bootstrap.modal के साथ कोणीय घटक का उपयोग कैसे करें?




angularjs angular-ui-bootstrap (4)

मैं ui.bootstrap.modal के साथ कोणीय घटक का उपयोग करना चाहता हूं। कोणीय संस्करण 1.5 है।
मैंने नीचे की तरह उपयोग करने की कोशिश की।

अंग

function MyComponentController($uibModalInstance){
  var ctrl = this;

  ctrl.doSomething = function() {
    //doSomething
  }
}

app.component('myComponent', {
  contoller: MyComponentController,
  templateUrl: '/path/to/myComponent.html'
}

जनक नियंत्रक

function parentController($uibModal){
  var ctrl = this;

  ctrl.openModal = function(){
    var modalInstance = $uibModal.open({
      template: '<my-component></my-component>'

  }
}

और जब मैं parentController.openModal() निष्पादित करता parentController.openModal() , तो मुझे $ इंजेक्टर की त्रुटि मिली : अनजाने प्रदाता को हालांकि मोडल विंडो खुली है।
क्या ui.bootstrap.modal के साथ कोणीय घटक का उपयोग करने का एक तरीका है? यदि आपको अधिक जानकारी चाहिए, तो कृपया मुझे बताएं।
धन्यवाद।

संपादित करें
मुझे रेनाटो मचाडो, धन्यवाद रेनाटो से ui.bootstrap.modal के साथ घटक का उपयोग करने का एक तरीका मिला है।
लेकिन मुझे लगता है कि यह थोड़ा जटिल है और सुविधाजनक नहीं है। तो अंत में मुझे लगता है कि मोडल के अंदर घटक का उपयोग करना बेहतर है।
मोडल को नियमित तरीके से खोला जाता है ( $uibModal.open({}) में बस नियंत्रक और टेम्पलेट सेट करें और मोडल में वह घटक होता है जिसमें वे $uibModal.open({}) होते हैं जिन्हें आप सामान्यतः उपयोग करना चाहते हैं।
मोडल में केवल साधारण लॉगिक्स होने चाहिए जो कि मोडल के साथ संबंधित हों जैसे कि क्लोज मोडल विंडो।
मुख्य रूप से व्यवसाय / अनुप्रयोग से संबंधित एक और लॉजिक्स घटक में होना चाहिए।
यह सामान्य बनाने में आसान बनाता है।


यदि आप $ uibModal के $close() और $dismiss() कार्यों के साथ-साथ कुछ मूल डेटा और फ़ंक्शन को अपने घटक में बाँधना चाहते हैं, तो आप उन सभी को इस तरह से पास कर सकते हैं:

ओपन मोडल लॉजिक

$uibModal.open({
    template: '<login close="$close()" dismiss="$dismiss()" ' +
        'email="$ctrl.cookieEmail" check-login="$ctrl.ajaxLogin(user, pass)"></login>',
    controller: function () {
        this.cookieEmail = $cookies.get('savedEmail');
        this.ajaxLogin = AjaxLoginService.login;
    },
    controllerAs: '$ctrl'
});

मॉडल लॉगिन घटक

{
    templateUrl: 'view/login.html',
    bindings: {
        email: '<',
        checkLogin: '&',
        close: '&',
        dismiss: '&'
    },
    controller: function () {
        var viewModel = this;

        viewModel.password = '';

        viewModel.submit = function () {
            viewModel.checkLogin(
                { user: viewModel.email, pass: viewModel.password }
            ).then(function (success) {
                viewModel.close();
            });
        }
    }
}

मोडल HTML

<form ng-submit="$ctrl.submit()">
    <input type="text" ng-model="$ctrl.email" />
    <input type="password" ng-model="$ctrl.password" />
    <button type="button" ng-click="$ctrl.dismiss()">Cancel</button>
    <button type="submit">Login</button>
</form>

AngularJS 1.5 डॉक्स थोड़े विरल हैं, लेकिन वे फ़ंक्शन आवरण के रूप में & बाइंडिंग का उपयोग दिखाते हैं: https://docs.angularjs.org/guide/component


मूल नियंत्रक के साथ गुजर कर इसे और अधिक जटिल बनाने की आवश्यकता नहीं है, आप इसे केवल .component के भीतर से एक्सेस कर सकते हैं जो मोडल प्रदर्शित करता है।

अंग

/**
 * @ngdoc component
 * @name fsad.component:video
 *
 * @description <fsad-video> component, in development...
 *
 */


(function () {
  'use strict';

  angular.module('fsad').component('fsadVideo', {
    bindings: {},
    templateUrl: function(appConstant){return appConstant.paths.modules.fsad + 'leefloon/fsad-video.html'},
    controller: controller
  });

  controller.$inject = ['$scope'];
  function controller($scope){

    var $ctrl = this;

    setDataModel();

    /****************************************************************/

    $ctrl.ui.close = close;

    /****************************************************************/

    function setDataModel(){

      $ctrl.ui = {};

    }
    function close(){
      $scope.$parent.$close();
    }

  }

}());

मोडल खोलना

  var modalInstance = $uibModal.open({
    backdrop: 'static',
    keyboard: true,
    backdropClick: false,
    template: '<fsad-video></fsad-video>',
    windowClass: 'edit-contactenblad',
  });

चूंकि आप कह रहे हैं कि टेम्पलेट एक घटक है, $ गुंजाइश है। $ माता-पिता हमेशा मोडल उदाहरण की ओर इशारा करेंगे। आप $ पास () फ़ंक्शन का उपयोग करने की अनुमति दे रहे हैं।

डेटा पास करना और प्राप्त करना

यदि आपको घटक को डेटा पास करने की आवश्यकता है, या घटक से डेटा वापस प्राप्त करना है, तो आप इसे इस तरह से कर सकते हैं।

  var modalInstance = $uibModal.open({
    backdrop: 'static',
    keyboard: true,
    backdropClick: false,
    template: '<fsad-video method="$ctrl.method" on-viewed="$ctrl.userHasViewedVideo(time)"></fsad-ideo>',
    controller: function(){
      this.method = method;
      this.userHasViewedVideo = function(time){}
    },
    controllerAs: '$ctrl',
    windowClass: 'edit-medewerker',
  });

बस एक साइड नोट पर, मैं घटक बनाने के लिए इस संरचना शैली गाइड का उपयोग कर रहा हूं।


आपको मूल घटक को उस पर मोडल उदाहरण के साथ मूल नियंत्रक को पास करना होगा। ऐसा करने के लिए आपको मूल घटक में मॉडल के जेनरेट किए गए HTML को जोड़ना होगा

मूल घटक

$ctrl.openModal = function(){
    $ctrl.modalInstance = $uibModal.open({
        template: '<your-modal></your-modal>',
        appendTo : $document.find('parentComponent')
    });
}

मोडल घटक

.component('yourModal', {
        templateUrl: 'path/to/modal.html',
        replace: true,
        require: {
            parent : '^parentComponent'
        },
        controller: ModalCtrl
    });

function ModalCtrl() {
    var $ctrl = this;

    $ctrl.$onInit = function(){

        var instance = $ctrl.parent.modalInstance;

        $ctrl.items = ['item1', 'item2', 'item3'];

        $ctrl.selected = {
            item: $ctrl.items[0]
        };

        $ctrl.ok = function () {
            instance.close($ctrl.selected);
        };

        $ctrl.cancel = function () {
            instance.dismiss('cancel');
        };

        instance.result.then(function (selectedItem) {
            $ctrl.selected = selectedItem;
        }, function () {
            console.log('Modal dismissed at: ' + new Date());
        });
    };


}

सावधान रहें क्योंकि आवश्यक नियंत्रक केवल $ onInit के बाद ही उपलब्ध होंगे।


EDIT: UI बूटस्ट्रैप 2.1.0 के रूप में बूटस्ट्रैप मोडल्स में घटक के लिए मूल समर्थन है। ऐसा लगता है कि मॉडल्स के साथ कुछ मुद्दों को ठीक करने के लिए 2.1.0 के बाद कई त्वरित रिलीज़ हुए हैं, इसलिए मैं नवीनतम को हथियाना सुनिश्चित करूंगा।

UI बूटस्ट्रैप 2.1.0+ का उपयोग कर एक संस्करण के लिए इस प्लंक को देखें

http://plnkr.co/edit/jy8WHfJLnMMldMQRj1tf?p=preview

angular.module('app', ['ngAnimate', 'ui.bootstrap']);

angular.module('app')
  .component('myContent', {
     template: 'I am content! <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open Modal</button>',
     controller: function($uibModal) {
        $ctrl = this;
        $ctrl.dataForModal = {
        name: 'NameToEdit',
        value: 'ValueToEdit'
     }

    $ctrl.open = function() {
      $uibModal.open({
         component: "myModal",
         resolve: {
           modalData: function() {
             return $ctrl.dataForModal;
           }
         }
       }).result.then(function(result) {
            console.info("I was closed, so do what I need to do myContent's  controller now.  Result was->");
      console.info(result);
       }, function(reason) {
           console.info("I was dimissed, so do what I need to do myContent's controller now.  Reason was->" + reason);
       });
    };
  }
});

angular.module('app')
  .component('myModal', {
template: `<div class="modal-body"><div>{{$ctrl.greeting}}</div> 
<label>Name To Edit</label> <input ng-model="$ctrl.modalData.name"><br>
<label>Value To Edit</label> <input ng-model="$ctrl.modalData.value"><br>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleClose()">Close Modal</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleDismiss()">Dimiss Modal</button>
</div>`,
  bindings: {
    modalInstance: "<",
    resolve: "<"
  },
  controller: [function() {
    var $ctrl = this;
    $ctrl.$onInit = function() {
      $ctrl.modalData = $ctrl.resolve.modalData;
    }
    $ctrl.handleClose = function() {
      console.info("in handle close");
      $ctrl.modalInstance.close($ctrl.modalData);
    };
    $ctrl.handleDismiss = function() {
      console.info("in handle dismiss");
      $ctrl.modalInstance.dismiss("cancel");
    };
  }]
});

मूल उत्तर नीचे है:

मैं दूसरे दिन भी यह जानने की कोशिश कर रहा था। मैंने इस पोस्ट में मिली जानकारी को इस लिंक के साथ लेने की कोशिश की और इसे पूरा करने के लिए एक वैकल्पिक तरीके के साथ आया। ये कुछ संदर्भ लिंक हैं जो मुझे मिले जिन्होंने मेरी मदद की:

https://github.com/angular-ui/bootstrap/issues/5683

http://www.codelord.net/ (इसने घटकों में कॉलबैक के तर्क को समझने में मदद की)

यहाँ भी एक प्लंक है: http://plnkr.co/edit/PjQdBUq0akXP2fn5sYZs?p=preview

मैंने कुछ डेटा को संपादित करने के लिए एक मोडल का उपयोग करके एक सामान्य वास्तविक दुनिया के परिदृश्य को प्रदर्शित करने की कोशिश की।

angular.module('app', ['ngAnimate', 'ui.bootstrap']);

angular.module('app')
.component('myContent', {
    template: 'I am content! <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open Modal</button>',
    controller: function($uibModal) {
        $ctrl = this;
        $ctrl.dataForModal = {
            name: 'NameToEdit',
            value: 'ValueToEdit'
        }
        $ctrl.open = function() {
            $uibModal.open({
                template: '<my-modal greeting="$ctrl.greeting" modal-data="$ctrl.modalData" $close="$close(result)" $dismiss="$dismiss(reason)"></my-modal>',
                controller: ['modalData', function(modalData) {
                    var $ctrl = this;
                    $ctrl.greeting = 'I am a modal!'
                    $ctrl.modalData = modalData;
                }],
                controllerAs: '$ctrl',
                resolve: {
                    modalData: $ctrl.dataForModal
                }
            }).result.then(function(result) {
                console.info("I was closed, so do what I need to do myContent's controller now and result was->");
                console.info(result);
            }, function(reason) {
                console.info("I was dimissed, so do what I need to do myContent's controller now and reason was->" + reason);
            });
        };
    }
});

angular.module('app')
.component('myModal', {
    template: `<div class="modal-body"><div>{{$ctrl.greeting}}</div> 
<label>Name To Edit</label> <input ng-model="$ctrl.modalData.name"><br>
<label>Value To Edit</label> <input ng-model="$ctrl.modalData.value"><br>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleClose()">Close Modal</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleDismiss()">Dimiss Modal</button>
</div>`,
    bindings: {
        $close: '&',
        $dismiss: '&',
        greeting: '<',
        modalData: '<'
    },
    controller: [function() {
        var $ctrl = this;
        $ctrl.handleClose = function() {
            console.info("in handle close");
            $ctrl.$close({
                result: $ctrl.modalData
            });
        };
        $ctrl.handleDismiss = function() {
            console.info("in handle dismiss");
            $ctrl.$dismiss({
                reason: 'cancel'
            });
        };
    }],
});






angular-ui-bootstrap