为什么在AngularJS中css边距属性值为null_Angularjs_Angularjs Directive

为什么在AngularJS中css边距属性值为null

angularjs

为什么在AngularJS中css边距属性值为null,angularjs,angularjs-directive,Angularjs,Angularjs Directive,这是我的一个指令链接函数，该指令限制为EA，transclude为true link : function(scope,element,attrs){ element.ready(function(){ var myUL = element.find('ul'); console.log(myUL.css('margin')); // prints noting in console.

这是我的一个指令链接函数，该指令

限制为EA，transclude为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>

当我在控制台中打印

myUL

时，它会给我

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

var myUL=angular.element（element.find（'ul'）也不为我工作。我做错了什么？我还在css中将元素中的ul的边距设置为0

1）可能有多个

ul

元素响应您的发现

尝试使用

.eq（index）

或第n个子选择器指定

2）尝试在

angular.element

中包装查找，如下所示：

 var myUL = angular.element(element.find('ul'));

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

其次，如果你看这里：它说速记CSS属性不受支持。您需要使用“边距顶部”（或您感兴趣的边距）

工作示例：

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


角度.module（'myApp'，[]）.controller（'Ctrl'，function（$scope）{
})
.directive（'nmrDir'，function（）{
返回{
限制：'E'，
是的，
模板：“”，
链接：函数（范围、元素、属性）{
元素。就绪（函数（）{
var myUL=element.find（'ul'）；
console.log（myUL.css（'margin-top'）；
});
}
};
});
.应用程序容器ul{
利润率：10px；
填充：0；
列表样式：无；
}

感谢您的快速回答。在发布问题之前，我已经尝试了你的两个技巧。。。运气不好：（.我应该这样写。抱歉..编辑我的问题你能发布一些与此指令相关的HTML吗？样式定义在哪里？它是动态的还是从模板或外部样式表生成的？实际上我正在尝试以angularjs的方式创建我自己的组件，我想使用几个angularjs项目，不想使用keep对jquery有任何依赖性。有没有办法不用jquery函数来获得保证金。非常感谢你的回答。代码与我的代码95%相似。啊，我没有为它制作任何控制器。如果我没有错的话……这是没有必要的。对吗？不，你不需要控制器，我只是在示例中有一个控制器，我基于它。如果你不想依赖jQuery，您需要自己实现该功能，但我建议您不要这样做，因为jQuery的人已经解决过一次了。

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