Question

您能告诉我我的代码有什么问题吗？我得到了最初的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文件后，我收到此错误：

错误：[$ injector：unpr] http://errors.angularjs.org/1.5.7/ $注射器/ unpr？P0 =％24modalInstanceProvider％20％3 C-％20％24modalInstance O /＆LT; @ https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:6:412 。分贝/ n的$注射器＆LT; @ https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:43:84 d @ https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:40:344 分贝/ V氮化@ https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:43:144 d @ https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:40:344 È@ https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:41:78 H /＆LT; .invoke @ https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:41:163 。GF /这$ gethttps：//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js：89：397 resolveSuccess @ https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js:4422:34 E /＆LT; @ https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:130:409 。VF /这$ gethttps：//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js：145：103 。VF /这$ gethttps：//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js：142：165 。VF /这$ 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 SF @ https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:37:31 RF / d @ https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:36:486

Answer 1

尝试在外面定义控制器，

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

}

Answer 2

请找工作演示

＆＃13;

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
  };

});

＆＃13;

<!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>

＆＃13;

AngularJS $ uibModal不工作

2 个答案: