將元素綁定到作用域變量

是否可以將某個元素綁定到作用域變量？將元素綁定到作用域變量

我想象這樣的事情：

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

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

我無法找到的文檔任何東西。

來源

2016-02-28 wutzebaer

我認爲你可以使用ngAnimate做到這一點，你看[文件]（https://docs.angularjs.org/api/ngAnimate ） –

謝謝，但動畫只是一個例子，但可能是它幫助我解決我目前的問題 – wutzebaer

你是什麼意思**將元素綁定到範圍變量**？ –

這不是做這件事的方法。

控制器不應該更改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>

，它可以在你的控制器一樣THI使用S：

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>

來源

2016-08-01 20:39:00 user3336731

我也想知道這個問題的答案。讓我試着重新修改它以提高清晰度，以便知道如何執行此操作的人：

我有一個名爲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是與arr中的此對象關聯的intl-tel-input元素。

在intl-tel-input項目源頁面的示例中，唯一元素ID主要用於在頁面上選擇控件的特定實例，但我無法使用任何元素ID，因爲可能有多個頁面上的小部件，導致ID衝突。

如果沒有明確使用唯一ID，我怎樣才能將HTML元素「綁定」到JavaScript對象，而不是將javascript對象綁定到HTML元素？

來源

2016-08-01 18:00:20 handle

將元素綁定到作用域變量

回答

相關問題