2

我写了这个简单的 jsfiddle，在其中我（成功地）在 ng-repeat 的指令上做了一些基本的 addClass。

http://jsfiddle.net/rv6u2/5/

现在，我的问题是：哪个是进行此类 DOM 操作的最佳（或预期）位置：

A. 在指令中？

B. 在控制器中？

我的示例中显示了这两种可能性。

代码：

var TestApp = angular.module("TestApp", ['ngResource']);
TestApp.directive('onLoad', function() {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            elm.addClass('loaded'); // A: DOM manipulation in directive
            scope.initMe(scope.$eval(attrs.onLoad2), elm); // B: DOM manipulation handled in controller
        }
    };
});

提前致谢 ：）

4

2 回答 2

6

永远不要操纵控制器内部的 dom。

控制器应该只使用服务并更新 $scope 的属性。所有 DOM 操作都应该由指令和（在某些情况下）服务（例如$anchorScroll）进行

在这里查看 angularjs 的概念

更新：此处正确方法的示例

于 2012-10-14T18:57:08.780 回答
2

设置类loaded2的更“角度方式”如下（避免控制器内部的DOM操作）：

在 HTML 中，为类 (myClass) 声明一个模型：

<div ng-repeat="item in items" ng-model="item" on-load="initMe(item)" ng-class="myClass">

在链接函数中，只需调用控制器方法：

scope.initMe()

在控制器中，操作 model/$scope 属性：

$scope.initMe = function() {
   $scope.myClass = "loaded2";
}

更改模型/范围将自动更新视图。

如果您想在 HTML 中声明一个类由 $scope 属性 myClass 控制，则此方法很有用。但是，在链接函数中使用 elm.addClass() 更加独立且更易于维护（我更喜欢这种方法）。

于 2012-10-16T15:50:51.407 回答