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'));私のためにもうまくいきませんでした。私が間違っていることは何ですか？また、要素のこの ul の css でマージンを 0 に設定します

4

2 に答える 2

0

二つのこと

1) 検索結果に複数のul要素が反応する場合があります。

.eq(index)または n 番目の子セレクターで指定してみてください。

angular.element2）次のように検索をラップしてみてください：

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

まず、jQuery を含めましたか? Angular には、jQuery のすべての機能を備えていない軽量バージョンの jQuery が含まれており、計算されたスタイルはその 1 つです。

次に、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 に答える