методы наследования с помощью директивных выражений

Question

Я пытаюсь создать директиву многократного использования, которая имеет состояние загрузки. То есть при щелчке он отключает себя и отображает встроенное изображение для обозначения загрузки, которое затем удаляется после завершения. Я делаю это, устанавливая переменную области видимости в методе кликов и отменяя ее, что изменяет состояние кнопки.

Я хочу, чтобы метод, который он вызывал при щелчке, находился в родительской области, и я также хочу, чтобы он подключался к проверке родительской области, поэтому он отключается, когда родительская форма недействительна. Это те части, с которыми мне сложно работать - я знаю, что мои проблемы связаны с областью, но я застрял.

<loading-button class="login" data-ng-click="login()" text="Login" toggle="loaded"></loading-button> 

Я надеялся, что-то сделать, как показано ниже, но как я могу связать метод нажмите заявленной в директиве, например, чтобы быть на самом деле называется из директивы? Или это плохая практика? В настоящее время это не работает.

angular.module("App.directives").directive("loadingButton", function() { 
return { 
    restrict: "E", 
    replace: true, 
    transclude: true, 
    template: '<button data-ng-click="{{ngClick}}">{{text}}<img class="loading" src="images/ButtonLoader.gif" alt=""></button>', 
    scope: { 
     "toggle": "=", 
     "text": "=", 
     "ng-disabled": "=", 
     "disabled": "=", 
     "ngClick": "&" 
    }, 
    link: function(scope, element, attributes) { 
     scope.text = attributes.text; 
     var expression = attributes.toggle; 

     scope.$watch(expression, function(newValue, oldValue) { 
      if(newValue === oldValue) { 
       return; 
      } 

      if(newValue) { 
       element.removeAttr("disabled"); 
       element.find("img.loading").hide(); 
      } 
      else { 
       element.attr("disabled", "disabled"); 
       element.find("img.loading").show(); 
      } 
     }); 
    } 
    }; 
}); 

Используется как это в родительской области:

$scope.login = function() { 
    $scope.loaded = false; // Disable button and show it loading 

    // Do login stuff 

    $scope.loaded = true; // Enable button and hide it loading 
} 

Edit:

Вот скрипку

http://jsfiddle.net/jonathanwest/frvk6/2/

Answer 1

EDIT - простое решение: Если все, что вы делаете, это позволяет кнопки и скрытие элементов в этой кнопке, вам не нужно директиву вообще:

<button ng-click="login()" ng-disabled="loading"><img ng-show="loading">Login</button> 

---

ИНАЧЕ, если вы хотите в директиве:

Для начала вам не нужно {{}} в объявлении вашего клика в шаблоне, и вам необходимо позвонить ().

Я меняю ссылку на атрибут от ngClick щелкать - угловой не будет, как вы используете свои имена, как ваши атрибуты:

<button data-ng-click="click()"> 

И использовать ng-show и ng-disabled для вашей кнопки и изображения.

<button ng-click="click()" ng-disabled="text==\'loading\'"> 
    <img ng-show="text==\'loading\'">{{text}}</button> 

.

Для атрибута text, так как вы просто читаете значение строки, вам необходимо изменить этот параметр области действия на text: "@".

Кроме того, поскольку toggle устанавливается в области выделения, вы можете просто $watch, что непосредственно для изменений.

* Обратите внимание, что это всего лишь пример отключения и отображения элементов на основе области $watch.Ваше отключение и показ может потребоваться точные противоположные значения приведенных ниже, или может зависеть от другой переменной области действия:

scope.$watch('toggle', function(newValue, oldValue) { 
      if(newValue === oldValue) { 
       return; 
      } 

      if(newValue) { 
       scope.text = "loaded"; 
       ; 
      } 
      else { 
       scope.text="loading"; 

      } 
     }); 

.

This fiddle отражает рабочий пример, основанный на вашей настройке, с имитируемым временем загрузки с использованием $timeout.