Как обновить атрибут угловой директивы динамически?

Я играю с Angular Timer, что я хочу сделать, это изменить «обратный отсчет» на событие. Я попытался этоКак обновить атрибут угловой директивы динамически?

<timer interval="1000" countdown="{{countdown}}">{{minutes}}:{{seconds}}</timer>

кишками мой контроллер выглядит как

// setup 
... 
$scope.timerRunning = true; 
$scope.countdown = 10; 
...

Я хочу, чтобы иметь возможность динамически обновлять отсчет времени в зависимости от условий, обрабатываемых в моем контроллере, например, добавьте 10 на каждый комплект (я знаю, как бороться с событием, это просто вопрос, чтобы директива обновляла обратный отсчет)

источник

2014-01-03 xenoterracide

Вам не нужны двойные завитки {{...}} в атрибуте, поскольку он уже интерпретируется как угловое выражение. Таким образом, следующий будет установлен атрибут на основе переменной области действия countdown:

<timer interval="1000" countdown="countdown"/>{{minutes}}:{{seconds}}</timer>

следующим в контроллере:

$scope.countdown= 120;

Динамически Обновление

Задача состоит в том, чтобы динамически обновлять таймер. Атрибуты директивы не просматриваются, по умолчанию, в циклах дайджеста. Поэтому, как только начнется обратный отсчет, он снова не проверяет атрибут. Например, если вы использовали кнопку, как этот, что обновленный отсчет:

<button ng-click="setCountdown(20)">set to 20</button>

С помощью этой функции

$scope.setCountdown = function(newVal) { 
    $scope.countdown =newVal; 
}

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

Решение

Авторы этой директивы таймера предусмотрели событие запуска таймера можно использовать в функции setCountdown как так:

$scope.setCountdown = function(newVal) { 
    $scope.countdown =newVal; 
    $timeout(function(){ 
    $scope.$broadcast('timer-start'); 
    },0); 
}

Здесь мы обновляем обратный отсчет, то мы выдаем timer-start для перезапуска таймера. Обратите внимание, что я выдаю широковещательную рассылку внутри $timeout, чтобы убедиться, что атрибут обновлен. Без этого $timeout результаты несовместимы.

Demo

источник

2014-01-03 18:52:15 KayakDave

Я бы попытался использовать какие-то $ watch, чтобы наблюдать, когда вы хотите изменить . отсчет

Убедитесь, что переменные обратного отсчета в контроллерах ваших директив привязаны к родительской области. (например, scope: {countdown: '='} или что-то подобное)

источник

2014-01-03 18:08:41 NicolasMoise

Я думаю, вам нужно использовать опцию изоляции «=» в вашей директиве для достижения этого. По моему мнению, это позволяет привязать ваше свойство контроллера к вашей директиве и наоборот.

Вы должны изменить свой обратный отсчет Аттрибут использовать объект контроллера:

<timer interval="1000" countdown="countdown">{{minutes}}:{{seconds}}</timer>

Ваш контроллер будет выглядеть примерно так:

app.controller("TimerCtrl", function($scope) { 
$scope.timerRunning = true; 
$scope.countdown = 10; 
});

И ваша директива будет что-то вдоль линий :

app.directive("timer", function() { 
return { 
    restrict: "E", 
    transclude: true, 
    scope: { 
     countdown: "=" 
    }, 
    template: '<div ng-transclude></div>', 
    link: function (scope, element) { 
     scope.incrementCountdown = function (amount) { 
      scope.countdown += parseint(amount, 10); 
     } 

     // something that would trigger the increment, could be whatever 
     element.bind('click', function() { 
      scope.incrementCountdown(10); // could also pull the param value from an attribute on your directive 
     }); 
    } 
} 
});

Этот способ, если вы измените обратный отсчет в пределах sc ope вашей директивы, он также должен обновить модель в вашем контроллере.

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

источник

2014-01-03 18:43:11 Josh

Как обновить атрибут угловой директивы динамически?

ответ

Смежные вопросы