Программно заданная ширина элемента 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, я получаю сообщение об ошибке выполнения при попытке программно задать ширину моих дел. Я не понимаю, что я делаю неправильно. Может кто-нибудь, пожалуйста, покажите мне, что я делаю неправильно? Мне нужно выяснить, как установить ширину во время выполнения в функции связи или контроллера. Еще раз, я должен сделать это программно. I не может добавить ширину в область действия и связать с ней пользовательский интерфейс.

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 удалены, и идентификатор имя-тестовый набор - вместо имени атрибута

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