文章/答案/技术大牛

发布

问在JQLite中查找元素
EN

Stack Overflow用户

提问于 2015-07-24 18:42:39

回答 1查看 1.4K关注 0票数 4

我想以角指令中的JQLite元素的形式访问类“对话框”的div。我不能使用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
  };
});

任何帮助都将不胜感激。如果你需要更多的信息，请告诉我！

jquery

angularjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-07-24 19:01:59

链接函数中有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');
};

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31617612

复制

相似问题

问在JQLite中查找元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JQLite中查找元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JQLite中查找元素
EN