在运行时在 AngularJS 中以编程方式设置 HTML 元素的宽度

Posted 2023-03-06

【中文标题】在运行时在 AngularJS 中以编程方式设置 HTML 元素的宽度

【英文标题】：Programmatically set width of HTML element at runtime in AngularJS

【发布时间】：2014-12-04 14:54:12

【问题描述】：

我正在处理 AngularJS 项目中的指令。在这个指令中，我 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 绑定到它。

【问题讨论】：

testDiv.css('width', (scope.width + 'px')); 和 testDiv.css('width', '500px');

【参考方案1】：

给你。

Your new plunkr

你有几个问题。首先，没有id test-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 的新模板，以及 test-name 集的 ID - 而不是 name 属性

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