Question

我已经开始研究电子学习交付平台，我们选择了Angularjs（1.2.29，因为我们仍然在IE8上有用户）。我们的团队对Angular来说都是相对较新的，我们不确定将系统简化为最佳做法是什么。

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

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

我已经看到形成的问题是我们将组件功能添加到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文件，我们是否应该重构设计以使用自定义元素（restrict：“E”）指令来封装功能？

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

是否可以很好地利用'元素限制'指令（有效的自定义html标签）来封装我们各个组件的代码？我可以想象最终得到一个定义我们需要的组件的自定义html标签列表。这甚至是什么元素指令？

感谢。

Answer 1

您的问题的答案是肯定的，这是指令的目的：以智能方式在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和模板在页面中注入html，如下所示：

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

和html页面中的某处，包含一个脚本

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

在Angular 1.2.29中将DOM操作从控制器中移出

1 个答案: