Angular：$uibModal 中的 DOM 操作

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>

这是模态指令的控制器：

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

用这个来调用它：

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

当点击保存按钮时，我需要使用另一个 3rd 方库来更改按钮样式/动画，基本上是这样的：

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