AngularJS $uibModal 不工作

Posted 2023-02-22

【中文标题】AngularJS $uibModal 不工作

【英文标题】：AngularJS $uibModal Not Working

【发布时间】：2017-04-13 14:22:15

【问题描述】：

您能告诉我我的代码有什么问题吗？我得到了初始的 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/$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.$injectorhttps://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 分贝/Vhttps://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 e@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:41:78 h/<.invoke href="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:41:163" rel="nofollow" target="_blank">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 解决成功@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 顺丰@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:37:31 射频/d@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:36:486

【问题讨论】：

在你的 open 函数中做一个 console.log 看看它是否正在触发

为什么你在$http.get 调用success 函数中定义了$scope.open .. ajax 调用成功了吗？

您是否在 html 中通知了控制器？像 ng-controller="controllerName"

不。没有。甚至没有记录数据。

我已经编辑了这个问题。请检查。

【参考方案1】：

请找到工作演示

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>

【讨论】：

它正在工作，但请调整它以与$http.get('jobs.json')一起工作...谢谢。

@eric 代码 sn-p 中没有添加新文件的选项。所以我将无法添加 jobs.json 文件。所以我不得不像这样手动添加json。但是为了帮助您，我在您在环境中使用此代码时必须取消注释的行之后添加了 //Uncomment。希望这可以帮助你

我得到 $ctrl 没有定义。如何将它与此模板中的控制器绑定？它可以在没有 $ctrl 的情况下正常工作，但假设我希望它可以与 $ctrl 一起工作。

你在哪里使用过$ctrl，在哪个文件或控制器中？请确保您在 $uibModal.open 中添加了 controllerAs: '$ctrl', option。

如果要遍历对象属性，我们必须使用 (k,v)，其中 k 表示键，v 表示值。这是有用的链接docs.angularjs.org/api/ng/directive/ngRepeat

【参考方案2】：

尝试在外面定义这样的控制器，

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

【讨论】：

现在我得到这个错误：modalContentCtrl 没有定义