AngularJS $ uibModal不工作

可否请你让我知道什么是错我的代码？我得到最初的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 ...谢谢。

编辑：我已经放在ng-controller="carCtrl"在HTML文件后，我收到此错误：

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

为什么你定义了$''scope.open里面'$ http.get'调用'success'功能..这是否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不工作

回答

相关问题