AngularJS：缩小我的指令

发布时间：2020-12-17 07:08:11 所属栏目：安全来源：网络整理

导读：我使用指令要求用户在模态中进行操作确认. 它在开发过程中就像一个魅力,但在缩小之后,它就被打破了. 这是我得到的可怕的“$injector：unpr”错误： Error: [$injector:unpr] Unknown provider: aProvider - a... 我认为问题是$scope和$modalInstance被重命名

我使用指令要求用户在模态中进行操作确认.
它在开发过程中就像一个魅力,但在缩小之后,它就被打破了.
这是我得到的可怕的“$injector：unpr”错误：

Error: [$injector:unpr] Unknown provider: aProvider <- a
...

我认为问题是$scope和$modalInstance被重命名,不应该,但我不知道如何避免这个…

这是指令代码：

'use strict';
app.directive('reallyClick',['$modal',function($modal) {
  var modalInstanceCtrl = function ($scope,$modalInstance) {
    $scope.ok = function () {
      $modalInstance.close();
    };

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

  return {
    restrict: 'A',scope: {
      reallyClick: '&',item: '='
    },link: function (scope,element,attrs) {
      element.bind( 'click',function() {
        var message = attrs.reallyMessage || 'Are you sure?';
        var modalHtml = '<div class="modal-body">' + message + '</div>';
        modalHtml += '<div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>';

        var modalInstance = $modal.open({
          template: modalHtml,controller: modalInstanceCtrl
        });

        modalInstance.result.then(function () {
          scope.reallyClick({item:scope.item}); // raise an error : $digest already in progress
        },function() {
          // modal dismissed
        });
      });
    }
  };
}]);

我用这种方式：

...
<td title="Delete customer">
  <button
    class="btn btn-primary glyphicon glyphicon-trash"
    really-message="Are you really sure to remove customer <i>{{customer.name}}</i> ?" really-click="deleteCustomer(customerId)"
  ></button>
</td>
...

如果它可以提供任何帮助,这些是我在构建阶段使用的模块：

'auto_install','clean:dist','favicons','wiredep','useminPrepare','concurrent:dist','autoprefixer','concat','ngmin','copy:dist','cdnify','cssmin','uglify','filerev','usemin','htmlmin',

这些是我在我的app中注入的模块：

var app = angular.module('smallBusinessApp',[
  'ngSanitize','ngRoute','firebase','ui.bootstrap',]);

解决方法

modalInstance Controller也需要使用依赖注入语法创建,

'use strict';
app.directive('reallyClick',function($modal) {    
  return {
    restrict: 'A',function() {
          // modal dismissed
        });
      });
    }
  };
}]);

ModelInstanceController：

app.controller('modalInstanceCtrl',['$scope','$modalInstance',function ($scope,$modalInstance) {
    $scope.ok = function () {
      $modalInstance.close();
    };

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

对我来说也是一个问题,不得不将模态的控制器部分分开并像这样做,希望它有所帮助！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!