角度ディレクティブを使用してhtmlから配列を取得するには？

次の配列値を持つ属性NG-メニューとして与えられた指示があります：私はこのような、この配列内の各項目をリストする必要が角度ディレクティブを使用してhtmlから配列を取得するには？

<div data-ng-menu="['Home','Settings','About']"></div>

：

ホーム
設定が
約

私はこのようなものを試しました：

app.directive('ngMenu', function() { 
    var menu = {}; 
    var getItems = function(scope, element, attributes) { 
    //I suppose I should get the array value here 
} 
    menu.restrict = 'AEC'; 
    menu.link = getItems; 
    template : '<ul>' 
      + '<li>items</li>' 
      + '</ul>'; 
    return menu; 
});

誰でも私にこれを手伝ってもらえますか？私は角ドキュメントを読みましたが、私はあなたがする必要があるのは、属性値を評価することで便利なソリューション

出典

2016-04-29 Joey Zhang

：ここ

はフィドルある "与えられた指示があります：...データ-ngのメニューは..."：そのディレクティブはどこにありますか？あなたはそれを書きましたか？あなたが役に立つ助けが必要な場合は、完全なソースを投稿してください...あなたがそれを書くのを助けるならば、正確にどのように実行すべきかを明確に指定してください... – MarcoS

I think this example is useful 

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 

    <script src="Scripts/angular.js"></script> 
    <script> 
     var app = angular.module('MyApp', []); 
     app.directive('menu', function() { 
      debugger 
      return { 
       restrict: 'AEC', 
       scope:{}, 
       link: function (scope, ele, attributes) { 
        scope.result = attributes.menu; 
       }, 
       template: '<div>{{result}}</div>' 
      } 
     }) 
    </script> 




</head> 
<body> 
<div ng-app="MyApp"> 
    <div menu="'Home','Settings','About'"></div> 
</div> 

</body> 

</html>

出典

2016-04-29 10:03:18 Ashokreddy

非常に助かりました、ありがとう –

見つけることができませんでした：私はあなたがしたくないことを仮定している上記で

var getItems = function(scope, element, attributes) { 
    scope.menu = scope.$eval(attributes.ngMenu); 
}

を隔離された範囲を持つ。あなたは（私はディレクティブのこの種のためにあなたをお勧めしている）、それを必要としませんが、あなたが結合双方向を使用することができた場合：

app.directive('ngMenu', function() { 
    var menu = {}; 
    var getItems = function(scope, element, attributes) { 
    console.log(scope.menu); // array of items bound to the scope.menu 
    } 
    menu.scope = { 
    menu: '=ngMenu' 
    }; 
    menu.restrict = 'AEC'; 
    menu.link = getItems; 
    menu.template = '<ul><li ng-repeat="item in menu">{{item}}</li></ul>'; 
    return menu; 
});

出典

2016-04-29 09:42:47 dfsq

私はあなたが探しているものだと思う。このように達成することができます。

app.directive('ngMenu', function() { 
    var menu = {}; 
    var getItems = function($scope, element, attributes) { 
     alert($scope.ngMenu); //$scope.ngMenu will have your array 
    }; 
    menu.scope = { 
     ngMenu: '@' 
    }; 
    menu.restrict = 'AEC'; 
    menu.link = getItems; 
    template : '<ul>' 
      + '<li>items</li>' 
      + '</ul>'; 
    return menu; 
});

HTML：

<div ng-menu="['Home','Settings','About']"></div>

出典

2016-04-29 09:50:02

* "$ scope.ngMenuはあなたの配列を持っています" * - 文字列になります。 – dfsq

私はあなたのニーズにフィットするシンプルなディレクティブの例を書いてきました：

のhttps://jsfiddle.net/obx25af0/9/

JS：

var app = angular.module('myApp', []); 

app.directive('myMenu', function(){ 
    var link = function(scope, attrs, element){ 
    console.log(scope.menuItems); 
    alert(scope.menuItems); 
    } 
    return { 
    restrict: 'AE', //use as element or attribute 
    scope: { //isolate scope 
     'menuItems': '=' 
    }, 
    link: link 
    } 
});

がHTML：

<div> 
    <!-- You can use the directive as an attribute(restrict A)--> 
    <div my-menu menu-items="['menu 1', 'menu 2', 'menu 3']"></div> 
    <!-- Or as an element(restrict E)--> 
    <my-menu menu-items="['menu 4', 'menu 5', 'menu 6']"></my-menu> 
</div>

出典

2016-04-29 10:00:53 Vlad

リストとして所望の出力を表示するための非常に簡単な再利用可能な指示。

角度コード

var myApp = angular.module('myApp',[]); 

myApp.controller('MyCtrl', function($scope){ 
    $scope.items=['Home','Settings','About']; 
}); 

myApp.directive('myMenu', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     list: "=" 
    }, 
    template: '<ul><li ng-repeat="item in list">{{item}}</li></ul>' 
    }; 
});

HTML

<div ng-controller="MyCtrl"> 
    <my-menu list="items"></my-menu> 
</div>

うまくいけば、それが役立ちます。 http://jsfiddle.net/5sbb48fq/

出典

2016-04-29 11:07:06

角度ディレクティブを使用してhtmlから配列を取得するには？

答えて

関連する問題