AngularJS, как вызвать dav-связанный javascript при изменении ng-if

0

У меня есть поле формы (входной текст) с ng - если оно было ложным в начале. В какой-то момент значение ng-if станет истинным.

Когда это произойдет, я хочу выполнить некоторый javascript, который управляет DOM. Чтобы это было просто, скажем, что мне нужно выбрать входное значение и сфокусировать поле.

<input type="text" ng-value="foo" ng-if="show" onshow="doSomething()"/>
<button ng-click="toggle()"></button>

JavaScript

ctrl.foo = "bar";
ctrl.show = false;

ctrl.toggle = function(){
    ctrl.show = !ctrl.show;
}

Я знаю, что это похоже на "неугольный подход", но здесь я думаю, что действие не связано с моделью.

  • 0
    Вы можете создать директиву и поместить ее в свой ввод, например: do-something="show" . Когда show true, директива запускается. Это было бы похоже на ng-if, поскольку, когда show имеет значение true, ng-if отображает html.
Теги:

1 ответ

2

Поскольку ng-if директива выполнить шаблон каждый раз, когда show станет правдой, вы можете использовать ng-init для этого. Смотрите следующий фрагмент и замените alert('test); чем угодно.

angular.module('test', []).controller('test', function($scope, $element) {

  $scope.show = false;
 
  $scope.toggle = function() {
    $scope.show = !$scope.show;
  };
  
  $scope.init = function() {
    alert($element.find('input').val());
  };
  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="test">
  <div ng-controller="test">
    <input type="text" value="foo" ng-if="show" ng-init="init()" />
    <button ng-click="toggle()">Toggle</button>
  </div>
</div>
Поделиться
  • 0
    очень хорошее решение!
  • 0
    Это умно! Но так как init - угловая функция, она показывает мне контекст модели, а не dom (входной тег), или, по крайней мере, я не знаю, как получить к ней доступ. Если это возможно, можете ли вы обновить функцию init для выполнения focus () для объекта ввода dom?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню