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

我已经开始在电子学习交付平台上工作，并且我们选择了Angularjs（1.2.29，因为我们在IE8上仍然有用户）。我们的团队对Angular来说都是相对较新的，我们不确定提供系统的最佳做法是什么。在Angular 1.2.29中获取DOM操作控制器1.2.29

目标是建立一个非常基于组件的结构，设计人员可以简单地编辑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; 
}]);

我已阅读并观看了很多的教程，以及角度网站页面，而是理解如何让我们的项目的具体要求与角的工作证明困难。

此页...... https://code.angularjs.org/1.2.29/docs/guide/controller
......告诉我，DOM操作代码应在指令封装（无论是定制还是内置的，我认为）。

鉴于我们想要结束与每个必需组件关联的小型.js文件，我们是否应该重构设计以使用自定义元素（restrict：“E”）指令来封装功能？

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

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

谢谢。

来源

2016-08-18 moosefetcher

你的问题的答案是肯定的，那就是指令的目的：以智能的方式在你的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-包括使用模板注入的HTML页面，这样的：

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

，并在某处您的html页面，包含脚本

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

来源

2016-08-18 08:46:30 Luxor001

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

回答

相关问题