モーダル角は機能しません。未処理の拒否{}

Question

私はモーダル（ダイアログ）を作成したいと思います。私は公式ブートストラップのドキュメンテーションの例に従ってきましたが、私は固執しました。 122おそらく未処理の拒絶：：{}

メインコントローラ：

angular 
.module('app') 
.controller('tlmController', function($scope, $http, $timeout, $uibModal,   DTOptionsBuilder, DataLoader, TestLines) { 
    $scope.openTestLineDetails = function(id) { 
     var modalInstance = $uibModal.open({ 
      size: 'lg', 
      controller: 'testlineDetailsController', 
      templateUrl: 'app/client/layout/testlinedetails.tpl.html', 
      resolve: { 
       testLineId: function() { 
        return id; 
       } 
      } 
     }); 
    }; 
}) 

とTestlineDetailsController：

私はモーダルを作成しようとしているとき、私はエラーに

angular.min.jsを受け取ります

angular 
.module('app') 
.controller('testlineDetailsController', function($scope, $modalInstance, testLineId) { 


}); 

このコードで何が問題になっていますか？メインコントローラに$ uibModal（$ modalサービスは存在しません）を使用しています。私は$ modalInstanceを$ uibModalInstanceに置き換えるとエラーが発生します（サービス$ uibModalInstanceは存在しません）ので、$ modalInstanceで$ uibModalを使用する必要があります。ストレートだが真実。

Answer 1

あなたは、app.configを

app.config(['$qProvider', function ($qProvider) { 
    $qProvider.errorOnUnhandledRejections(false); 
}]); 

すべての

Answer 2

まず、コードの下に書くことができChromeで（あなたのモーダルコントローラスクリプトがブラウザでメインのHTMLファイルに追加し、その付加した場合（表示されます）されて確認し、 F12のキーボードボタンを使ってWeb開発者用ツールを開き、 "Elements"タブボタンを開きます（これはYeomanのチームのgenerator-angularのような足場ツールを使用している場合、コードから最新のアップデートを得るためにキャッシュをクリアすることを忘れないでください）私は同じ問題を抱えていたので（私は自分のコードで何が間違っていたかを見直していたので、私が作った最新のスクリプト（Modal controller）をブラウザに追加していないことが分かったので、王あなたのコードの例：はEDIT：（これはオプションです

 


            
 
 
 

             
  
 
   
<!-- In your index.html file, check for this script being appended in your browser --> 
 
<script src="testlineDetailsController.js"></script>
 
  
            
 
 
 

 

//In your parent controller 
 
angular 
 
.module('app') 
 
.controller('tlmController', function($scope, $http, $timeout, $uibModal, DTOptionsBuilder, DataLoader, TestLines) { 
 
    $scope.openTestLineDetails = function(id) { 
 
     var modalInstance = $uibModal.open({ 
 
      size: 'lg', 
 
      controller: 'testlineDetailsController', 
 
      templateUrl: 'app/client/layout/testlinedetails.tpl.html', 
 
      resolve: { 
 
       testLineId: function() { 
 
        return id; 
 
       } 
 
      } 
 
     }); 
 
    }; 
 
})

第二

、あなたはモーダルコントローラにおけるモーダルインスタンス・サービスから少なくとも1つのメソッドを実装していることを確認してください

//In your modal controller 
 
angular.module('app'). 
 
controller('testlineDetailsController', function ($scope, $uibModalInstance, testLineId) { 
 
      //In case you have the ok and cancel buttons in your modal template 
 
      $scope.id = testLineId; 
 
      $scope.ok = function() { 
 
       $uibModalInstance.close(); 
 
      }; 
 

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

このモードオプションオブジェクトの背景属性を使用してモーダルを非表示にすることができます。

この後、あなたのアプリが動作しているはずです。

さて、あなたは直接モーダルオプションのプロパティにコントローラ機能を書くことができ、この問題は解決し得るために別の代替があり、オブジェクト：

//In your parent controller 
 
angular 
 
.module('app') 
 
.controller('tlmController', function($scope, $http, $timeout, $uibModal, DTOptionsBuilder, DataLoader, TestLines) { 
 
    $scope.openTestLineDetails = function(id) { 
 
     var modalInstance = $uibModal.open({ 
 
      size: 'lg', 
 
      //write an anonymous function instead of naming the controller name. 
 
      controller: function ($scope, $uibModalInstance, testLineId) { 
 
       $scope.id = testLineId; 
 
       $scope.ok = function() { 
 
       $uibModalInstance.close(); 
 
       }; 
 
       $scope.cancel = function() { 
 
       $uibModalInstance.dismiss('cancel'); 
 
       }; 
 
      }, 
 
      templateUrl: 'app/client/layout/testlinedetails.tpl.html', 
 
      resolve: { 
 
       testLineId: function() { 
 
        return id; 
 
       } 
 
      } 
 
     }); 
 
    }; 
 
})

この代替すべきあなたのアプリでも動作します。だから私はこの説明があなたが持っている問題を解決するのに役立つことを願っています。