Question

我尝试从指令中的$元素获取宽度。但是，它会继续返回0。

你能告诉我这是什么问题吗？你能告诉我解决方案吗？

要查看问题，我已创建了一个演示：

指令

angular.module('testApp').directive('testDirective', testDirective)
function testDirective() {
    return {
        restrict: 'E',
        controller: 'TestController',
        controllerAs: 'vm',
        bindToController: true,
        scope: {}
    }
}

控制器

angular.module('testApp').controller('TestController', TestController);

TestController.$inject = ['$element'];

function TestController($element) {
    var vm = this;

    init()

    function init(){
    vm.elWidth0 = $element.find("div")[0].clientWidth; 
    vm.elWidth1 = $element.find("div")[0].offsetWidth; 
    vm.elWidth2 = $element.prop('clientWidth'); 
    console.log(vm.elWidth0); //return 0
    console.log(vm.elWidth1); //return 0
    console.log(vm.elWidth2); //return 0
    }
}

HTML

<test-directive>
    <div>
        <button>a</button>
        <button>c</button>
        <button>d</button>
        <button>e</button>
        <button>f</button>
    </div>
</test-directive>

感谢您的建议

Answer 1

看看这个plnkr：http://plnkr.co/edit/3D8kQUukMkXRld9kNYJ1?p=preview

您似乎没有得到对元素的正确引用。请尝试使用querySelector：

$element[0].querySelector('button').clientWidth;

<强>更新

将DOM操作放在指令中的最佳位置是link函数（实际上是post-link），因为链接发生在编译指令html之后。

控制器也是在编译指令html之后创建的，但是使用控制器来分离需要与角度服务进行通信的逻辑是很好的。关于指令链接与控制器here有一些非常好的信息。

您的指令可能如下所示：

function testDirective() {
  return {
    restrict: 'E',
    controller: 'TestController',
    controllerAs: 'vm',
    bindToController: true,
    scope: {}, 
    link: function(scope, element, attrs) {
      scope.elWidth0 = element.find("div")[0].clientWidth; 
      scope.elWidth1 = element.find("div")[0].offsetWidth; 

      console.log(scope.elWidth0);
      console.log(scope.elWidth1);
    }
  }
}

angularjs：如何在不使用jquery的情况下从指令中的$元素获取宽度

1 个答案: