Question

我试图使用自定义指令更改承诺状态的按钮文本。

所以这是我的自定义指令的代码

.directive('myDir',function(){
          return {
            scope: {
              myDir: '&',
              afterValue: '@',
              beforeValue:'@',
              ngDisable:'=',
            },
            link: function ($scope, element, attrs) {
              element[0].innerHTML=$scope.beforeValue;
              element.bind('click',function(){
                console.log(element);

                element[0].innerHTML=$scope.afterValue;
                element[0].className+="disabled";
                element[0].disabled='true'
                $scope.myDir();
                //success i would like to change the status here
              })
            }
          }

        })

和我的控制器

.controller('myCtrl',[function(){
          var vm = this;
          console.log("MYCTRL");
          vm.fun= function(){
            //promise running here
          }
        }])

这里是plnkr链接： https://plnkr.co/edit/Qj9GG2?p=templates/

我无法在指令中读取承诺的成功。

Answer 1

您可以使用.then获取promise的结果。在下面的示例中，我创建了一个将在2秒后解析的promise。当它解决后，该指令将改变按钮上的文字。

我使用$q创建了一个承诺，但是如果您执行ajax调用，那就是同样的事情：

  vm.fun= function(){
    //promise running here
    return $http.get('www.foo.org');
  }

＆＃13;

angular
        .module('myApp',[])
        .directive('myDir',function(){
          return {
            scope: {
              myDir: '&',
              afterValue: '@',
              beforeValue:'@',
              ngDisable:'=',
            },
            link: function ($scope, element, attrs) {
              element[0].innerHTML=$scope.beforeValue;
              element.bind('click',function(){                  
                element[0].innerHTML=$scope.afterValue;
                element[0].className+="disabled";
                element[0].disabled='true'
                $scope.myDir().then(function(){
                  //success i would like to change the status here  
                  // Change status here...
                  console.log('Callback from promise. Everything is fine.');
                  
                  element[0].disabled=false;
                  element[0].innerHTML = $scope.beforeValue;
                }, function(){
                    // Something went bad.
                    console.log('Callback from promise. Something went wrong.');
                });
                
              })
            }
          }
          
        })
        .controller('myCtrl',['$q', function($q){
          var vm = this;
          console.log("MYCTRL");
          vm.fun= function(){
            console.log('method called');
            // Create a promise here...
            var def = $q.defer();
            
            setTimeout(function(){
              console.log('done in controller');
              def.resolve();
              
              // You can also use reject if something went wrong.
              // def.reject();
            }, 2000)
            
            return def.promise;
          }
        }])

＆＃13;

<script data-require="angular.js@1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div ng-app="myApp">
  <div ng-controller="myCtrl as $ctrl">
  <button class="btn btn-primary" my-dir="$ctrl.fun()" after-value="Clicked" before-value="click" ng-disabled>Click</button>
  </div>
</div>

＆＃13;

根据评论

更新：

当用户点击按钮时，它应该更改文本并禁用按钮和调用invoke承诺。按钮文本更改并禁用i 我在指令中执行它并在控制器中调用promise。

这就是行$scope.myDir()中发生的事情，尽管你没有调用承诺。您拨打function，然后返回promise。 你是怎么说的，应该援引这个承诺？

接下来我想依赖承诺成功或失败正在运行在控制器上我想更改文本并禁用false。

这是.then()下发生的事情。如果myDir()成功。然后代码将改变按钮上的状态。这是在指令中完成的，因为它只是知道按钮的指令。你从promise中获得了成功和错误回调。

更改承诺状态的状态

1 个答案: