Angularjs 将元素绑定到范围变量

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

我想是这样的：

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

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

你好
应用程序控制器（'myCtl'，函数（$scope）{
$（$scope.myHelloSpan）.fadeIn（100）；
})

---

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

我也想知道这个问题的答案。让我尝试重新表述一下，以提高任何知道如何做到这一点的人的清晰度：

我有一个名为

arr

的javascript对象数组。在HTML文档中，我使用

ng repeat

在

arr

中为每个对象创建一个。现在，我需要

arr

中的每个对象引用其在DOM上的关联输入元素，以便我可以使用如下逻辑：

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

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

for（变量i=0；i

其中，

foo

是某个函数的占位符，该函数取决于附加到intlTelInput jQuery插件的

getNumber

方法的结果，

domElement

是与

arr

中的此对象关联的intl tel输入元素

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

---

如果不显式地使用唯一ID，如何将HTML元素“绑定”到javascript对象，而不是将javascript对象绑定到HTML元素？

这不是一种角度上的方法

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

阅读有关创建自己的指令的更多信息，请访问

如果你真的真的想这么做（尽管我建议你不要这么做！），这里有一个非常简单的指令，它应该做你想做的事情：

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>

这样做的问题是控制器创建了范围，因此在控制器执行时，该指令尚未分配给范围变量。这就是我的示例使用按钮的原因。它还可以与超时一起使用，让span指令将自身分配给作用域

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

执行此操作的方法是创建一个指令，该指令基于某个范围变量或事件为您执行操作

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>

单击以使用事件淡入淡出
单击以使用变量淡入淡出
你好

我想你可以使用ngAnimate来实现这一点，谢谢，但animate只是一个例子，但它可能对我目前的问题有所帮助吗？将元素绑定到范围变量是什么意思？我的意思是，我想在html中定义一个变量名，它应该在范围变量中赋值。。正如我的例子所示