AngularJS:在其他指令中使用指令

时间:2016-06-22 17:02:47

标签: javascript angularjs angularjs-directive

这是我的第一个AngularJS指令,所以请善待:D

我试图在我写的指令中使用ladda指令,我使用了'要求'属性,但它似乎没有效果。

以下是代码:

ladda-button.js

app.directive('laddaButton', function () {
return {
    restrict: 'E',
    priority: -100,
    require: 'ladda',
    scope: {
        ngIf: '@',
        laddaVariable: '=',
        buttonClass: '@',
        iconClass: '@',
        text: '@',
        loadingText: '@',
        onClick: '&'
    },
    bindToController: true,
    templateUrl: './tpl/directives/button.html',
    controller: function ($scope) {
        console.log($scope.laddaVariable)
        var auxText = $scope.text

        $scope.loading = function () {
            $scope.text = $scope.loadingText;
            var stop = $scope.$watch('laddaVariable', function (newVal, old) {
                if (!newVal) {
                    $scope.text = auxText;
                    stop();
                }
            });
        }
    }
}
});

button.html

     <button class="{{buttonClass}}" ng-click="onClick(); loading();"  ladda=laddaVariable data-style="expand-right"><i class="{{iconClass}}"></i>{{text}}</button>

这是一个实现:

         <ladda-button on-click="fake()"
              ng-if="true"
              ladda-variable="test"
              icon-class="fa fa-gear"
              button-class="btn btn-addon btn-primary"
              text="Richiedi credenziali SIP"
              loading-text="Caricando..."></ladda-button>

这是控制器:

  $scope.test = false;
  $scope.fake = function(){
         $scope.test = true;

         $timeout(function(){
               $scope.test = false;
            }, 2000);
          }
  }

0 个答案:

没有答案
相关问题