Question

我想访问class＆＃34;对话框＆＃34;作为angular指令中的JQLite元素。我无法使用element.find('div')因为我在模板中有另一个div。

根据此人的问题（AngularJS: How to .find using jqLite?）我试过用 angular.element(elem.querySelector('.dialog')) 但我不确定elem应该是什么。我也尝试过使用

var body = element.find('body')
var dialog = body.children().eq(0);

但这似乎也不起作用。

我的HTML代码在这里;它与模板templateUrl：

相关联

<body>
    <div class='dialog' ng-style="{'width': model.width+'px', 'height': model.height+'px', 'top':model.top+'px', 'left':model.left+'px', 'z-index': model.zindex}" 
                        ng-mousedown='zorder()'>
        <span class='topbar'> 
            <button id='minimize' ng-click="minimize()"> _ </button>
        </span>
        <div>
           <ng-include src=model.template></ng-include>
        </div>
        <span class='drag'></span>
    </div>
</body>

这是我的指令代码的基本结构：

angular.module('root', [])
.controller('index', ['$scope', function($scope){
  $scope.dialogs = [
  {
    minimized: false,
    width: 200,
    height: 300,
    top: 5,
    left: 5,
    zindex: 1,
    template: 'experiment-dialog.html'
  }]
}])

  .directive('makeDialog', function($document) {
  return {
    restrict: 'E',
    scope: {
        model: '=',
        dialogs: '='
    },
    templateUrl: 'dialog.html',
    link: function(scope, element, attrs) {

      //jqlite elements
      var dialog = angular.element(elem.querySelector('.dialog'));
      var topBar = dialog.children().eq(0);
      var drag = dialog.children().eq(2);


      dialog.css('border', 'solid purple') //fails to give dialog elements purple border
  };
});

非常感谢任何帮助。如果您需要更多信息，请告诉我们！

Answer 1

您在链接函数中有element个对象，它是绑定到的元素指令的jqLite实例。为了能够使用本机浏览器DOM方法，您需要使用纯HTMLElement对象，您可以通过其索引从jqLite中提取该对象。

所以你应该在链接函数中使用element，如下所示：

link: function (scope, element, attrs) {

    var dialog = angular.element(element[0].querySelector('.dialog'));
    var topBar = dialog.children().eq(0);
    var drag = dialog.children().eq(2);

    dialog.css('border', 'solid purple');
};

在JQLite中查找元素

1 个答案: