我使用指令要求用户在模式中确认操作。
它在开发过程中就像一个魅力,但是在缩小之后,它就被破坏了。
这是我收到的可怕的“$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',
这些是我在应用程序中注入(inject)的模块:
var app = angular.module('smallBusinessApp', [
'ngSanitize',
'ngRoute',
'firebase',
'ui.bootstrap',
]);
最佳答案
还需要使用依赖注入(inject)语法创建 modalInstance Controller ,
'use strict';
app.directive('reallyClick', ['$modal', function($modal) {
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
});
});
}
};
}]);
模型实例 Controller :
app.controller('modalInstanceCtrl',['$scope','$modalInstance',function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
对我来说也是一个问题,必须将模式的 Controller 部分分开并这样做,希望它有帮助!!
关于AngularJS:缩小破坏了我的指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24970071/