Question

我正在研究AngularJS项目中的指令。在此指令中，我 HAVE 以编程方式在运行时设置HTML元素的宽度。但是，我没有取得任何成功。目前，我的指令如下：

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

你有几个问题。首先，没有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>

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

1 个答案: