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

我正在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的宽度时会遇到运行时错误。我不明白我在做什么错。有人可以告诉我我在做什么错吗？我需要弄清楚如何在运行时在链接或控制器功能中设置宽度。再次，我必须以编程方式执行此操作。我无法为合并范围添加宽度并将UI绑定到该范围。

最佳答案

干得好。

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-代替了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>