AngularJS $ uibModal Not Working

私のコードに間違いがあることを教えてください。最初のHTMLページが表示されますが、「開く」をクリックすると何も起こりません。コンソールにもエラーやその他の変更が記録されません。

app.js

var app = angular.module('carApp', ['ui.bootstrap']);

ctrl.js

app.controller('carCtrl', function($scope, $http, $uibModal) { 
    $http.get('jobs.json').success(function(data) { 
     $scope.data = data; 

     $scope.open = function() { 

      var modalContent = $uibModal.open({ 
       templateUrl: 'careersTpl.html', 
       controller : modalContentCtrl, 
       resolve: { 
        items: function() { 
         return $scope.data; 
        } 
       } 
      }) 
     } 
    }); 
}); 

var modalContentCtrl = function ($scope, $modalInstance, data) { 
    $scope.data = data; 
    $scope.selected = { 
     item: $scope.data.specs 
    }; 
};

JSON：

{ 
    "specs":[ 
     { 
     "job-title":"TITLE", 
     "job-apply":"applink", 
     "job-body":"JOB BODY" 
     } 
    ] 
}

HTML：

<div class="car-up"> 
    <script type="text/ng-template" id="careersTpl.html"> 
     <div class="modal-header"> 
      <h3>Lorem Ipsum</h3> 
     </div> 
     <div class="modal-body"> 
      <p ng-repeat="item in data">{{item}}</p> 
     </div> 
    </script>  
    <button class="btn" ng-click="open()">Open</button> 
</div>

私はAngularJSを初めて使っていますが、app.jsとctrl.js ...ありがとうございました。

編集：私はhtmlファイルにng-controller="carCtrl"を配置した後、私はこのエラーが表示されます。

Error: [$injector:unpr] http://errors.angularjs.org/1.5.7/ $injector/unpr?p0=%24modalInstanceProvider%20%3C-%20%24modalInstance O/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:6:412 db/n.$injector<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:43:84 [email protected]https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:40:344 db/V<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:43:144 [email protected]https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:40:344 [email protected]https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:41:78 h/<[email protected]https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:41:163 gf/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:89:397 [email protected]https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js:4422:34 e/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:130:409 vf/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:145:103 vf/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:142:165 vf/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:145:399 Lc[b]https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:274:444 [email protected]https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:37:31 Rf/[email protected]https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:36:486

出典

2016-11-29 eric.dummy

オープン関数にconsole.logを実行して、起動しているかどうかを確認します – user2085143

なぜ '$ http.get'コール' success'関数内で '$ scope.open'を定義したのですか？Ajaxコールは成功しますか？ –

あなたはhtmlのコントローラに通知しましたか？ ng-controller = "controllerName"のように –

デモ

作業見つけてください、この外のようなコントローラーを定義してください

angular.module('carApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
 
var app = angular.module('carApp'); 
 
app.controller('carCtrl', function($scope, $http, $uibModal) { 
 
    //$http.get('jobs.json').success(function(data) {//Uncomment 
 
    //$scope.data = data; Uncomment 
 

 
    //Remove below line from code when you are using this in your project 
 
    $scope.data = { 
 
    "specs": [{ 
 
     "job-title": "TITLE", 
 
     "job-apply": "applink", 
 
     "job-body": "JOB BODY" 
 
    }] 
 
    } 
 

 
    $scope.open = function() { 
 

 
     var modalContent = $uibModal.open({ 
 
     templateUrl: 'careersTpl.html', 
 
     controller: 'ModalInstanceCtrl', 
 
     controllerAs: '$ctrl', 
 
     resolve: { 
 
      items: function() { 
 
      return $scope.data; 
 
      } 
 
     } 
 
     }) 
 
    } 
 
    //});//Uncomment 
 
}); 
 

 
app.controller('ModalInstanceCtrl', function($uibModalInstance, items, $scope) { 
 
    $scope.data = items; 
 
    console.log($scope.data); 
 
    $scope.selected = { 
 
    item: $scope.data.specs 
 
    }; 
 

 
});

<!doctype html> 
 
<html ng-app="carApp"> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script> 
 

 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="carCtrl" class="modal-demo"> 
 
    <script type="text/ng-template" id="careersTpl.html"> 
 
     <div class="modal-header"> 
 
     <h3>Lorem Ipsum</h3> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p ng-repeat="(k,v) in data.specs"> 
 
      <span>Title: {{v["job-title"]}}<br/> </span> 
 
      <span>Link: {{v["job-apply"]}}<br/> </span> 
 
      <span>Body: {{v["job-body"]}}<br/> </span> 
 
     </p> 
 
     </div> 
 
    </script> 
 
    <button class="btn" ng-click="open()">Open</button> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-11-29 14:47:35

それは動作していますが、 '$ http.get（ 'jobs.json'）' ...で作業するように調整してください。 –

@eric新しいファイルを追加するオプションがコードスニペットにありません。だから私はjobs.jsonファイルを追加することはできません。だから私はjsonを手動で追加する必要がありました。しかし、あなたのお手伝いをするには、あなたの環境でこのコードを使用している間にコメントを外す必要がある行の後に//コメントを外してください。これはあなたを助けるかもしれません –

$ ctrlが定義されていません。どのように私はこのテンプレートのコントローラとバインドするのですか？それは$ ctrlをうまく使用せずに動作しますが、$ ctrlで動作させたいとしましょう。 –

app.controller('modalContentCtrl ', function($scope, $modalInstance, data) { 
    $scope.data = data; 
    $scope.selected = { 
    item: $scope.data.specs 
    }; 

}

出典

2016-11-29 14:37:22 Sajeetharan

このエラーが発生しました：modalContentCtrlが定義されていません –

AngularJS $ uibModal Not Working

答えて

関連する問題