我想将模板中的所有元素添加到$ scope中。 我希望它们可以像代码中的c#或java元素一样访问。
例如,如果我有这个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代码。
答案 0 :(得分:1)
您可以使用指令来实现此目的。
.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/