AngularJS 注入问题与 Angular Bootstrap 模态 [英] AngularJS inject issue with Angular Bootstrap modal

查看：22
本文介绍了AngularJS 注入问题与 Angular Bootstrap 模态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在集成来自 Angular Bootstrap 的模态，并尝试调整来自 此处的代码示例 到我的应用程序.我收到错误:Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance

我需要做什么才能使 $modalInstance 工作?我从代码示例中看到他们已经编写了它，因此它在函数的范围内，但我不确定在链接控制器时如何编写.

angular.module('myApp', ['ui.bootstrap']).控制器('ModalInstanceCtrl'，函数($scope，$modalInstance){}).factory('AuthService', ['$http', '$rootScope', '$modal',功能($http，$rootScope，$modal){返回 {loginModal:函数(回调){var modalInstance = $modal.open({templateUrl: '/partials/main/signin',控制器:'ModalInstanceCtrl'});modalInstance.result.then(function(selectedItem) {$scope.selected = selectedItem;}， 功能() {});}};}]);

解决方案

好的 - 问题实际上出在我的模板上.我已将样本中的部分修改为:

<div class="modal-header"><h3>我是一个模态！</h3>
<div class="modal-body"><ul><li ng-repeat="项目中的项目"><a ng-click="selected.item = item">{{ item }}</a>已选择:<b>{{ selected.item }}</b>

<div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">取消</button>

实际上我需要删除 ng-controller 引用.

<div class="modal-header"><h3>我是一个模态！</h3>
<div class="modal-body"><ul><li ng-repeat="项目中的项目"><a ng-click="selected.item = item">{{ item }}</a>已选择:<b>{{ selected.item }}</b>

<div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">取消</button>

我仍然觉得我在使用 Angular 时磕磕绊绊，但这似乎奏效了！

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 注入问题与 Angular Bootstrap 模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆