Javascript 在Angular 1.2.29中从控制器中获取DOM操作

我已经开始在一个电子学习交付平台上工作，我们选择了Angularjs（1.2.29，因为我们仍然有IE8用户）。我们的团队对于Angular来说都是相对较新的，我们不确定什么是最好的实践，以将系统交付给客户

其目的是拥有一个非常基于组件的结构，设计师可以简单地编辑json文件，根据需要添加命名组件。在幕后，每个组件都应该有自己的html模板、js功能文件和css

到目前为止，我们的工作系统包括“段落”和“图像”部分。下一步是添加一个具有一些交互功能的“弹出”组件

我已经看到的问题是，我们正在将组件功能添加到app.js文件中的“pageController”中，我怀疑这是一个非常糟糕的主意，尤其是因为如果我们继续在那里添加每个组件的功能，该文件将变得巨大而笨拙。以下是app.js中的pageController，到目前为止：

app.controller('pageCtrl', ['$scope', '$routeParams', '$http', 'content', function($scope, $routeParams, $http, content) {

    $http.get('json/page' + $routeParams.pageId + '.json')
    .success(function(data) {
        $scope.page = data;
    });

$scope.getStyle = function(singleCase, device) {
    if (singleCase == undefined)
        return '';

    return assignBootstrap(singleCase, device);
}

// function for new, interactive 'popup' component
$scope.showPopup = function (showOnClick) {
    // presentation logic located here. This is a bad idea, right?
    if ($('#'+showOnClick).hasClass('overlay')) {
        $('#page_container').append($('#'+showOnClick));
    }
    $( '#' + $( '#' + showOnClick ).attr('data-replaces') ).remove();
    $('.popup').addClass("hidden");
    $('#'+showOnClick).removeClass("hidden");
}

    $scope.pageId = $routeParams.pageId;
}]); 

我已经阅读并观看了Angular网站上的很多教程和页面，但是理解如何获得Angular项目的具体要求是很困难的

这一页。。。
…告诉我DOM操作代码应该封装在指令中（我假设是自定义的或内置的）

考虑到我们希望最终得到与每个所需组件关联的小.js文件，我们是否应该重构设计以使用自定义元素（restrict：“E”）指令来封装功能

我遇到的信息是如此基于概念和抽象，很难知道如何将这些概念最好地应用到一个工作项目中

使用“元素限制”指令（有效地自定义html标记）来封装单个组件的代码是否很好？我可以想象最终会有一个自定义html标记列表，这些标记定义了我们需要的组件。这就是元素指令的用途吗

---

谢谢。

您的问题的答案是肯定的，这就是指令的目的：以智能的方式在HTML中注入一些可重用的组件

如果您需要将变量绑定到“组件”上，请考虑一下：通过使用指令/组件，您将能够轻松、毫不费力地完成这项工作

这种使用视图的方式与角度相反：

$scope.showPopup = function (showOnClick) {
    // presentation logic located here. This is a bad idea, right?
    if ($('#'+showOnClick).hasClass('overlay')) {
        $('#page_container').append($('#'+showOnClick));
    }
    $( '#' + $( '#' + showOnClick ).attr('data-replaces') ).remove();
    $('.popup').addClass("hidden");
    $('#'+showOnClick).removeClass("hidden");
}

因为你最终会在你的控制器上复制这些代码

或者，如果您的“容器”中不需要任何形式的逻辑，您可以使用ng include with templates在页面中注入html，如下所示：

<div ng-include"myContainer.html"></div>

在html页面的某个地方，包含一个脚本

<script type="text/ng-template" id="myContainer.html">
  <!-- content -->
</script>

---

您的问题的答案是肯定的，这就是指令的目的：以智能的方式在HTML中注入一些可重用的组件

如果您需要将变量绑定到“组件”上，请考虑一下：通过使用指令/组件，您将能够轻松、毫不费力地完成这项工作

这种使用视图的方式与角度相反：

$scope.showPopup = function (showOnClick) {
    // presentation logic located here. This is a bad idea, right?
    if ($('#'+showOnClick).hasClass('overlay')) {
        $('#page_container').append($('#'+showOnClick));
    }
    $( '#' + $( '#' + showOnClick ).attr('data-replaces') ).remove();
    $('.popup').addClass("hidden");
    $('#'+showOnClick).removeClass("hidden");
}

因为你最终会在你的控制器上复制这些代码

或者，如果您的“容器”中不需要任何形式的逻辑，您可以使用ng include with templates在页面中注入html，如下所示：

<div ng-include"myContainer.html"></div>

在html页面的某个地方，包含一个脚本

<script type="text/ng-template" id="myContainer.html">
  <!-- content -->
</script>