javascript - AngularJS，如何在 ng-if 变化时触发与 dom 相关的 javascript

Question

我有一个表单字段(输入文本)，开头的 ng-if 为 false。在某个时刻，ng-if 值变为真。

发生这种情况时，我想执行一些操作 DOM 的 javascript。为简单起见，假设我需要选择输入值并聚焦该字段。

<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;
}

我知道它看起来像是一种“非 Angular 方法”，但我认为这里的 Action 与模型无关。

Answer 1

由于 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>