javascript - 在 angularJS 中无需单击按钮即可触发模式

Question

我有一个简单的模式，它会在显示类似消息的条件下触发。

html:

<div ng-if="getGuestModal()"></div>

Controller :

  $scope.guestIndicator = function () {
    return true;
  };

  $scope.guestModal = function() {
        $modal.open({
          animation: true,
          controller: guestModalController
          templateUrl: "./guestModal.html"
        });
    };

  $scope.getGuestModal = function () {
    if ($scope.guestIndicator()) {
      $scope.guestModal ();
    }
  };

遇到错误，显示“未捕获错误:[$rootScope:infdig] 已达到 10 $digest() 迭代。正在中止!”

有什么想法吗？

Answer 1

也许只需降低一些代码复杂性就能解决这个问题......

<div ng-if="getGuestModal()"></div>

在 div 中，您有一个将在页面加载时运行的函数。该函数返回undefined，即falsy，因此ng-if值将是“false”；从来都不是真的。

如果您希望您的函数 getGuestModal 在页面加载时触发，就像使用 ng-if 一样，那么也许在您的 Controller 中您可以这样做...

// Controller...

if(guestIndicator()){
  $scope.guestModal();
}

我猜你的div不是你的模态的实际HTML，只是你的钩子(Hook)来激活函数来触发你的逻辑.

您可以执行此操作的另一种方法是将 View 中的MODAL与其自己的自定义指令连接起来，例如

<my-modal ng-if="isGuest"></my-modal>

然后在你的 Controller 中加载像这样的东西......

// Controller...

$scope.isGuest = myLogicFunctionThatReturnsABoolean();

In your custom directive...

app.directive("myModal",...

  return {
    restrict: "E",
    boiler plate....
    controller: function($scope){
      $modal.open({
        animation: true,
        controller: guestModalController
        templateUrl: "./guestModal.html"
      });
    }
  }

Another thing to mention...

模态通常位于渲染的 dom 中，即使它没有显示，然后当您希望它出现时，您只需使用 bool 值调用它，无论是在逻辑中，还是通过按钮或链接。