未观看 Angular Modal UI 中的变量答案

【问题标题】：Variable in Angular Modal UI not watched未观看 Angular Modal UI 中的变量
【发布时间】：2021-11-25 20:47:20
【问题描述】：

In this plunk我有一个Angular Modal UI，其中有一个被监视的变量，但是当变量改变时没有触发watch函数，这是怎么回事？

Javascript

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {

        $scope.x = 'a';

        $scope.open = function(){
          $scope.modalInstance = $uibModal.open({
              templateUrl: 'myModalContent.html',
              scope: $scope
            }); 
        };

        $scope.close = function(){
          $scope.modalInstance.close();
        };


        $scope.$watch('x', function (newValue, oldValue) {
          if (typeof newValue === 'undefined')
              return;
           alert('value='+$scope.newValue);
       });
});

HTML

<button ng-click="open()">Open</button>
<script type="text/ng-template" id="myModalContent.html">
   <div class="modal-header">
      <h4 class="modal-title">The Title</h4>
      value <input type="text" ng-model="x" />
      <button ng-click="close()">Close</button>
   </div>
</script>

【问题讨论】：

尝试将控制器添加到模态实例中，例如 $uibModal.open({ templateUrl: "myModalContent.html", scope: $scope, controller: "ctl" })
谢谢，解决了问题

标签： angularjs angular-ui-bootstrap angular-ui

【解决方案1】：

刚刚在 plunker 中测试过，$uibModal 需要您的控制器才能绑定到您的作用域。

改变；

$scope.open = function(){
      $scope.modalInstance = $uibModal.open({
          templateUrl: 'myModalContent.html',
          scope: $scope
        }); 
    };

到;

$scope.open = function(){
      $scope.modalInstance = $uibModal.open({
          templateUrl: 'myModalContent.html',
          scope: $scope,
          controller: "ctl"
        }); 
    };

如果您使用的是 .js 文件，您可以使用 controllerUrl = "path/to/jsfile.js" 加上所述控制器的名称。

【讨论】：

【解决方案2】：

请在 $uibModal.open 中定义控制器以获取更多参考，请详细访问此文档 https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs

【讨论】：

【解决方案3】：

这个问题有助于解决 $uibModal onload 事件

刚刚添加到modalController

$scope.open = function () {
    $scope.status.opened = true;
};
$scope.$watch(status, function (newValue, oldValue) {
    //code required onload..
});

【讨论】：