Question

我在学习使用按钮触发的角度之前为我的项目编写了一个bootstrap3模态。现在我想使用角度变量来切换它。参考this文章，我简化了我的代码如下：

我的模态html：

<div id="registered" tabindex="-1" modal-toggle role="dialog" aria-labelledby="registeredModal" aria-hidden="true" class="modal fade">
  <div class="modal-dialog modal-lg">
    ...
    ...
  </div>
</div>

modalToggle指令：

app.directive("modalToggle",function(){
  return function(scope, element, attrs){
    scope.$watch(scope.loaded.showModal, function(value) {
                if (value) element.modal('show');
                else element.modal('hide');
    });
  }
})

scope.loaded.showModal设置在跟随控制器上，在我点击表单输入上的选项卡后调用：

app.controller('validatectrl',[ '$http', '$scope', '$upload', $location, function($http, $scope, $location){
      unique: function(param){
        $scope.loading={};
        $scope.loaded={};
        $scope.loading[param.field]=true;

        var currentPath=$location.path();
        var webCall = $http({
                   method: 'POST',
                   url: currentPath+'/validation',
                   async : true,
                   headers: {
                     'Content-Type': 'application/json'
                   },
                   timeout:10000,
                   data: param});
        webCall.then(handleSuccess,handleError);
        function handleSuccess(response) {
          ...
          if(response.data.status===1) {
            ...
          }
          else if(response.data.status===0){
            $scope.loaded["showModal"]=true;
            alert("duplicate item");
          }
        }
        function handleError(response){
          $scope.loaded[param.field]={};
          $scope.loading[param.field]=false;
          $scope.loaded[param.field]["error"]=true;
          $scope.loaded[param.field]["Message"]="Cannot fetch data from server";
        };
      }

其他所有工作除了模态没有弹出。

Answer 1

您可以尝试从

更改

scope.$watch(scope.loaded.showModal, function(value) {
            if (value) element.modal('show');
            else element.modal('hide');
});

到

scope.$watch(function(){ return scope.loaded.showModal; }, function(value) {
            if (value) element.modal('show');
            else element.modal('hide');
});

希望得到这个帮助。

使用角度变量切换bootstrap模态

1 个答案: