在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

回答

相關問題