Question

我想将模板中的所有元素添加到$ 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代码。

Answer 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/

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

1 个答案: