AngularJs控制器添加模板中的所有html元素

我想將我的模板中的所有元素添加到我的$ scope中。我希望它們可以像代碼中的c＃或java元素一樣訪問。AngularJs控制器添加模板中的所有html元素

例如如果我有這樣的HTML模板

<div ch-options-div id="chOptions" ng-controller="chOptionsCtrl"> 
    <span>Options</span> 
    <div id="chOptionsWrapper"> 

     <div id="div1"> 
     </div> 

     <div id="div2"></div> 
     <div id="div3"></div> 
    </div> 
</div>

這裏是一個可能的控制器：

var chOptions = angular.module('chOptions',[]); 

chOptions.controller('chOptionsCtrl', function ($scope,$document,$element) 
{  
    //select all elements by id and add them to scope 
    $scope.chOptionsWrapper = document.getElementById('chOptionsWrapper'); 
    //or with jquery 
    $scope.div1 = $('#div1') 
}

有沒有做到這一點最好的情況還是有增加的好方法我所有的HTML元素的範圍？我想幹淨的「面向對象」的JavaScript代碼。

來源

2015-02-05 Bongo

您可以使用選擇控制器內訪問任何東西。例如'$（'＃div1'）'。你爲什麼這樣做？如果你要操縱元素，最好在指令 – RSquared 2015-02-05 23:33:22

中這樣做，這將是一個乾淨的「面向對象」代碼的反面。您應該尊重模型 - 視圖 - 控制器方法，其中所有視圖保留在HTML中，並根據您的模型（$ scope）進行更新。 – floribon 2015-02-05 23:36:44

好吧我有一個div的背景顏色，並且想要操作它，因爲它被用作顏色預覽如何在不知道元素的情況下完成該操作？我可以在我的指令「ch-options-div」中訪問div1或div2嗎？ – Bongo 2015-02-05 23:39:29

您可以使用指令來實現此目的。

.directive('box', function() { 
    return { 
     scope: { 
      rgb: '=' 
     }, 
     link: function (scope, elem, attrs) { 
      scope.$watch('rgb', function() { 
       angular.element(elem).css('background-color', 'rgb(' + scope.rgb + ')'); 
      }); 
     } 
    } 
}

下面是一個例子來使用指令：http://jsfiddle.net/skriblez/dqfwvyso/4/

來源

2015-02-06 01:05:25 RSquared

AngularJs控制器添加模板中的所有html元素

回答

相關問題