javascript - 在 Angular 1.2.29 中从 Controller 中获取 DOM 操作

Question

我已经开始开发电子学习交付平台，我们选择了 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 的项目的具体要求是很困难的。

本页... https://code.angularjs.org/1.2.29/docs/guide/controller
...告诉我 DOM 操作代码应该封装在指令中(我认为是自定义的或内置的)。

鉴于我们希望最终得到与每个所需组件关联的小 .js 文件，我们是否应该重构设计以使用自定义元素(限制:“E”)指令来封装功能？

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

是否可以很好地使用“元素限制”指令(有效地自定义 html 标签)来封装我们各个组件的代码？我可以想象最终会得到一个定义我们需要的组件的自定义 html 标签列表。这就是元素指令的用途吗？

谢谢。

Answer 1

你的问题的答案是肯定的，这就是指令的目的:以智能的方式在 HTML 中注入(inject)一些可重用的组件。

想一想，如果您需要将变量绑定(bind)到您的“组件”:通过使用指令/组件，您将能够轻松轻松地完成此操作。

这种使用 View 的方式违背了事物的 Angular 方式:

$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");
}

因为您最终会在整个 Controller 上复制此代码。

.

或者，如果您的“容器”中不需要任何形式的逻辑，您可以使用 ng-include 和模板在页面中注入(inject) html，如下所示:

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

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

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