AngularJS注入问题与角度引导模式 [英] AngularJS inject issue with Angular Bootstrap modal
问题描述
我从整合角度引导模态,并试图在这里适应从 code样品我的应用程序。我得到的错误:错误:[$喷油器:unpr]未知提供商:$ modalInstanceProvider< - $ modalInstance
我需要什么做的,使$ modalInstance工作?我从code样品看见他们写它,以便它是函数的范围之内,但我不知道如何链接控制器时,写东西。
angular.module('对myApp',['ui.bootstrap'])。
控制器('ModalInstanceCtrl',函数($范围,$ modalInstance){
})。
工厂('AuthService',['$ HTTP,$ rootScope','$模式',
功能($ HTTP,$ rootScope,$模态){
返回{
loginModal:函数(回调){
VAR modalInstance = $ modal.open({
templateUrl:'/谐音/主/登入',
控制器:'ModalInstanceCtrl
});
modalInstance.result.then(功能(将selectedItem){
$ scope.selected = selectedItem属性;
},函数(){});
}
};
}
]);
确定 - 问题是实际上我的模板。我从样品修改的部分是:
< DIV NG控制器=ModalInstanceCtrl>
< DIV CLASS =模头>
< H3>我是一个模式<!/ H3 GT&;
< / DIV>
< DIV CLASS =模体>
< UL>
<李NG重复=中的项项>
<一个NG点击=selected.item =项目> {{}项}< / A>
< /李>
< / UL>
选择:其中,B> {{selected.item}}< / B>
< / DIV>
< DIV CLASS =模式躯>
<按钮类=BTN BTN-主要NG点击=OK()>确定< /按钮>
<按钮类=BTN BTN-警告NG点击=取消()>取消< /按钮>
< / DIV>
< / DIV>
而实际上,我需要删除NG-控制器参考。
< DIV>
< DIV CLASS =模头>
< H3>我是一个模式<!/ H3 GT&;
< / DIV>
< DIV CLASS =模体>
< UL>
<李NG重复=中的项项>
<一个NG点击=selected.item =项目> {{}项}< / A>
< /李>
< / UL>
选择:其中,B> {{selected.item}}< / B>
< / DIV>
< DIV CLASS =模式躯>
<按钮类=BTN BTN-主要NG点击=OK()>确定< /按钮>
<按钮类=BTN BTN-警告NG点击=取消()>取消< /按钮>
< / DIV>
< / DIV>
我还是觉得我跌跌撞撞周围的角,但是这似乎这样的伎俩!
I am integrating the modal from Angular Bootstrap and trying to adapt code sample from here to my app. I get the error: Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance
What do I need to do to make $modalInstance work? I see from code sample that they have written it so that it is within the scope of the function but I am not sure how to write things when chaining controllers.
angular.module('myApp', ['ui.bootstrap']).
controller('ModalInstanceCtrl', function($scope, $modalInstance) {
}).
factory('AuthService', ['$http', '$rootScope', '$modal',
function($http, $rootScope, $modal) {
return {
loginModal: function(callback) {
var modalInstance = $modal.open({
templateUrl: '/partials/main/signin',
controller: 'ModalInstanceCtrl'
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {});
}
};
}
]);
Ok - the issue was actually with my template. I had modified the partial from the sample to be:
<div ng-controller="ModalInstanceCtrl">
<div class="modal-header">
<h3>I am a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<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>
</div>
While in fact I needed to remove the ng-controller reference.
<div>
<div class="modal-header">
<h3>I am a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<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>
</div>
I still feel like I am stumbling around with Angular but this seemed to do the trick!
这篇关于AngularJS注入问题与角度引导模式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!