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

点击保存按钮后，我需要使用另一个第三方库更改按钮样式/动画，基本上是这样的：

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

Angular：$ uibModal中的DOM操作

1 个答案: