angularjs - Angular : DOM Manipulation in $uibModal

Question

我正在使用 UI Bootstrap for Angular 创建模式对话框，这是模式的 HTML 模板:

<div class="modal-content">
  <div class="modal-body">
      ...
  </div>
  <div class="modal-footer">
      <button class="btn btn-primary" ng-click="save();">Save</button>
  </div>
</div>

这是模态指令的 Controller :

app.controller('modalCtrl', [
    '$scope', function ($scope) {
        return $scope.save = function () {
            ...
        };
    }
]);

这样调用它:

$uibModal.open({
    templateUrl: '...',
    controller: 'modalCtrl'
});

单击保存按钮时，我需要使用另一个第 3 方库更改按钮样式/动画，基本上是这样的:

button.loading();

执行此操作的理想方法是什么？我知道很多人说指令是进行 DOM 操作的方法，但是我们在这里怎么做呢？

Answer 1

我想你可以试试这个:

HTML 将特定类添加到元素:

<button class="btn btn-primary thebutton" ng-click="save();">Save</button>

JS获取元素:

$scope.save = function () {
   angular.element('thebutton').loading();
};

如果您想使用指令:

HTML:

<button thebutton class="btn btn-primary" ng-click="save();">Save</button>

JS:

.directive('thebutton', function() {
    return {
        link: function(scope, element, attrs) {
            element.on('click', function () {
                element.loading();
            });
        }
    };
});