1

这是我的指令的链接函数restrict to EA and transclude is true 

link : function(scope,element,attrs){

            element.ready(function(){
                var myUL = element.find('ul');
                console.log(myUL.css('margin'));  // prints noting in console.
            });
}

我的 html 是

<body ng-app="nmrApp">
   <div class="app-container">
     <nmr-dir>
      <ul>
          <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 1" alt="" /></a></li>
          <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 2" alt="" /></a></li>
          <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 3" alt="" /></a></li>
          <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 4" alt="" /></a></li>
          <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 5" alt="" /></a></li>

      </ul>
  </nmr-dir>
   </div>
</body>

CSS：从名为 style.css 的外部 css 文件加载

.app-container ul{
  margin:0;
  padding:0;
  list-style: none;
}

myUL当我在控制台中打印时，它给了我

[ul.ng-scope, ready: function, toString: function, eq: function, push: function, sort: function…]

var myUL = angular.element(element.find('ul'));aslo 对我不起作用。堆积我做错了什么？我还在我的 CSS 中为元素中的这个 ul 设置了边距为 0

4

2 回答 2

0

首先，您是否包含了 jQuery？Angular 包含一个轻量级的 jQuery 版本，它没有 jQuery 的所有功能，计算样式就是其中之一。

其次，如果你看这里：http ://api.jquery.com/css/#css1它说不支持速记 CSS 属性。您需要使用“margin-top”（或您感兴趣的边距）。

工作示例：

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
    <script>
    angular.module('myApp', []).controller('Ctrl', function($scope) {

    })
    .directive('nmrDir', function() {
        return {
            restrict: 'E',
            transclude: true,
            template: '<div ng-transclude></div>',
            link: function(scope, element, attrs) {
                element.ready(function(){
                    var myUL = element.find('ul');
                    console.log(myUL.css('margin-top'));
                });
            }
        };
    });
    </script>
    <style type="text/css">
    .app-container ul{
        margin: 10px;
        padding: 0;
        list-style: none;
    }
    </style>
</head>
<body ng-controller="Ctrl">
    <div class="app-container">
        <nmr-dir>
            <ul>
                <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 1" alt="" /></a></li>
                <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 2" alt="" /></a></li>
                <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 3" alt="" /></a></li>
                <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 4" alt="" /></a></li>
                <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 5" alt="" /></a></li>
            </ul>
        </nmr-dir>
    </div>
</body>
</html>
于 2013-03-07T08:21:50.817 回答
0

两件事情

1) 可能有多个ul元素响应您的发现。

尝试使用.eq(index)或第 n 个子选择器指定。

2）尝试angular.element像这样包装 find ：

 var myUL = angular.element(element.find('ul'));
于 2013-03-07T06:57:57.363 回答