AngularJS注入问题与角度引导模式 [英] AngularJS inject issue with Angular Bootstrap modal

问题描述

我从整合角度引导模态，并试图在这里适应从 code样品我的应用程序。我得到的错误：错误：[$喷油器：unpr]未知提供商：$ modalInstanceProvider＆LT; - $ 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属性;
        }，函数（）{}）;
      }
    };
  }
]）;
 

解决方案

确定 - 问题是实际上我的模板。我从样品修改的部分是：

 ＆LT; D​​IV NG控制器=ModalInstanceCtrl＆GT;
  ＆LT; D​​IV CLASS =模头＆GT;
    ＆LT; H3＆GT;我是一个模式＆LT;！/ H3 GT＆;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =模体＆GT;
    ＆LT; UL＆GT;
      ＆LT;李NG重复=中的项项＆GT;
        ＆LT;一个NG点击=selected.item =项目＆GT; {{}项}＆LT; / A＆GT;
      ＆LT; /李＆GT;
    ＆LT; / UL＆GT;
    选择：其中，B＆GT; {{selected.item}}＆LT; / B＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =模式躯＆GT;
    ＆LT;按钮类=BTN BTN-主要NG点击=OK（）＆GT;确定＆LT; /按钮＆GT;
    ＆LT;按钮类=BTN BTN-警告NG点击=取消（）＆GT;取消＆LT; /按钮＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

而实际上，我需要删除NG-控制器参考。

 ＆LT; D​​IV＆GT;
  ＆LT; D​​IV CLASS =模头＆GT;
    ＆LT; H3＆GT;我是一个模式＆LT;！/ H3 GT＆;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =模体＆GT;
    ＆LT; UL＆GT;
      ＆LT;李NG重复=中的项项＆GT;
        ＆LT;一个NG点击=selected.item =项目＆GT; {{}项}＆LT; / A＆GT;
      ＆LT; /李＆GT;
    ＆LT; / UL＆GT;
    选择：其中，B＆GT; {{selected.item}}＆LT; / B＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =模式躯＆GT;
    ＆LT;按钮类=BTN BTN-主要NG点击=OK（）＆GT;确定＆LT; /按钮＆GT;
    ＆LT;按钮类=BTN BTN-警告NG点击=取消（）＆GT;取消＆LT; /按钮＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

我还是觉得我跌跌撞撞周围的角，但是这似乎这样的伎俩！

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屋！