Question

是否可以将元素绑定到范围变量？

我想象的是：

<div ng-controller="myCtl">
    <span ng-scope-bind="myHelloSpan">hello</span>
</div>

app.controller('myCtl', function($scope) {
   $($scope.myHelloSpan).fadeIn(100);
})

我无法在文档中找到任何内容。

Answer 1

我也想知道这个问题的答案。让我试着改写一下，以提高知道如何做到这一点的人的清晰度：

我有一个名为arr的javascript对象数组。在HTML文档中，我使用ng-repeat在arr中为每个对象生成一个intl-tel-input element。现在，我需要arr中的每个对象来引用DOM上的相关输入元素，这样我就可以使用这样的逻辑：

for (var i = 0; i < arr.length; ++i)
    foo(arr[i].domElement.intlTelInput('getNumber'));

其中foo是某个函数的占位符，它取决于附加到intlTelInput jQuery插件的getNumber方法的结果，而domElement是与intl-tel-input元素关联的在arr。

中使用此对象

在intl-tel-input项目源页面的示例中，唯一元素ID主要用于在页面上选择控件的特定实例，但是我不能使用任何元素ID，因为可能有多个小部件实例在页面上，导致ID冲突。

如果没有明确使用唯一ID，我如何将HTML元素“绑定”到javascript对象，而不是将javascript对象绑定到HTML元素？

Answer 2

这不是Angular的做法。

控制器永远不应该更改DOM（HTML）。这应该由指令处理。您的控制器应该操纵您的业务逻辑并更改范围变量，然后您的指令会监视这些变量并触发对DOM / HTML的更改。这就是核心指令（如ng-show，ng-repeat，ng-href等）的工作原理。

详细了解如何在https://docs.angularjs.org/guide/directive#creating-directives

创建自己的指令

如果你真的，真的想这样做（虽然我建议你不这样做！），这是一个非常简单的指令，应该做你想要的：

app.directive('myScopeBinding', function () {
     return {
         link: function ($scope, element, attr) {
            var myScopeVariableName = attr.myScopeBinding;
            $scope[myScopeVariableName] = element;
         }
     }
 });

该指令允许您将DOM元素分配给范围变量：

<div ng-controller="myCtl">
    <button type="button" ng-click="myCustomFadeTrigger();">Click to fade in hello span</button>
    <span my-scope-binding="myHelloSpan">hello</span>
</div>

它可以像你一样在你的控制器中使用：

app.controller('myCtl', function($scope) {
    $scope.myCustomFadeTrigger = function() {
        $($scope.myHelloSpan).fadeIn(100);
    };
})

这个问题是控制器创建了作用域，因此在控制器执行时，指令没有被分配给作用域变量。这就是我的例子使用按钮的原因。它也可以与超时一起使用，让span-directive将自己分配给范围。

另一个问题是元素分配到哪个范围。如果在ng-repeat中使用，它将被分配给当前迭代。如果在具有其自己的作用域的另一个指令中使用，它将被分配给该作用域，而不一定在控制器作用域内。

要做的角色是创建一个指令，根据某个范围变量或事件为您完成这些工作。

app.directive('myDirective', function () {
     return {
         link: function ($scope, element, attr) {

            // Get a jQuery-wrapper only once
            var $element = $(element);

            // Listen for a scope event
            $scope.$on('myCustomEvent', function() {
                $element.fadeIn(100);
            });

            // Watch a variable
            $scope.$watch('myElementVisible', function() {
                if ($scope.myElementVisible == true) {
                    $element.fadeIn(100);
                }
                else {
                    $element.fadeOut(100);
                }
            });

         }
     }
 });

使用此指令的HTML：

<div ng-controller="myCtl">
    <button type="button" ng-click="test1();">Click to fade using event</button>
    <button type="button" ng-click="test2();">Click to fade using variable</button>
    <span my-directive>hello</span>
</div>

将元素绑定到范围变量

2 个答案: