以編程方式在運行時設置HTML元素的寬度AngularJS

Question

我正在處理AngularJS項目中的指令。在這個指令中，I HAVE以編程方式在運行時設置HTML元素的寬度。但是，我沒有取得任何成功。目前，我的指令看起來像這樣：

My Plunkr Is Here

myApp.directive('myDirective', function() { 
    return { 
    restrict:'E', 
    transclude: true, 
    templateUrl: 'my-directive.html', 
    link: function(scope, element, attrs) { 
     var inputField = element.find('input'); 
      scope.width = inputField[0].offsetWidth;  

      scope.err1 = 'none'; 
      try { 
      var testDiv = element.find('#test-name'); 
      element(testDiv).css('width', (scope.width + 'px')); 
      } catch (e1) { 
       scope.err1 = e1.message; 
      } 

      scope.err2 = 'none'; 
      try { 
       var testDiv = element.find('.test-class'); 
       element(testDiv).css('width', '500px'); 

      } catch (e2) { 
       scope.err2 = e2.message; 
      } 
    }, 
    controller: function ($scope) { 
    } 
    }; 
}); 

由於the plunkr shows，我得到一個運行時錯誤，當我試圖以編程方式設置我的div的寬度。我不明白我做錯了什麼。有人能告訴我我做錯了什麼嗎？我需要弄清楚如何在鏈接或控制器函數中設置運行時的寬度。再一次，我必須以編程的方式做到這一點。我不能添加一個寬度範圍並將UI綁定到它。

Answer 1

在這裏，你去。

Your new plunkr

你有幾個問題。首先沒有idtest-name的元素 - 您設置了name，而不是ID。

此外，find()將無法​​正常工作，請使用children()而不是 - 您的示例實際上沒有找到該元素，因此得到了您的錯誤。

新指令（除去清晰你的錯誤的東西） - 您可以更改/刪除第二scope.width只是爲了看看它的工作

var myApp = angular.module("myApp", []); 
myApp.directive('myDirective', function() { 
    return { 
    restrict:'E', 
    transclude: true, 
    templateUrl: 'my-directive.html', 
    link: function(scope, element, attrs) { 


     var inputField = element.find('input'); 
     var name = element.children('#test-name'); 
     scope.width = inputField[0].offsetWidth; 

     scope.width = inputField[0].offsetWidth /3; // To test 

     angular.element(name).css('background-color', 'orange'); 
     angular.element(name).css('width', (scope.width + 'px')); 
    } 
    }; 
}); 

你有一些CSS新模板移除，的的ID測試名組 - 而不是名稱屬性

<script type="text/ng-template" id="my-directive.html"> 
     <div style="width:100%"> 
     <div id="test-name">Hello</div> 
     <input type="text" style="width:100%;" /> 
     <br /><br /> 
     <div>Width: {{width}}</div> 
     <div>Error #1: {{err1}}</div> 
     <div>Error #2: {{err2}}</div> 
     </div> 
    </script>