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

Question

我正在 AngularJS 项目中处理指令。在此指令中，我必须在运行时以编程方式设置 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 的宽度时，出现运行时错误。我不明白我做错了什么。有人可以告诉我我做错了什么吗？我需要弄清楚如何在运行时在链接或 Controller 函数中设置宽度。再次，我必须以编程方式执行此操作。我无法向范围添加宽度并将 UI 绑定(bind)到它。

Answer 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 的新模板，以及测试名称集的 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>