Wie bekomme ich ein Array aus html mit eckiger Direktive?

Es gibt eine bestimmte Richtlinie als Attribut ng-Menü mit dem folgenden Array-Wert:Wie bekomme ich ein Array aus html mit eckiger Direktive?

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

ich jedes Element in diesem Array wie folgt zur Liste benötigen:

Startseite
Einstellungen
über

ich habe versucht, so etwas wie diese:

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; 
});

Kann mir jemand dabei helfen? Ich habe die Angular Doc lesen, aber ich habe nicht eine nützliche Lösung

Quelle

2016-04-29 Joey Zhang

"Es gibt eine bestimmte Richtlinie: ... data-ng-Menü ...": Wo ist diese Richtlinie? Hast du es geschrieben? Poste es die volle Quelle, wenn du irgendeine nützliche Hilfe willst ... Wenn du nedd helfen willst, es zu schreiben, gib genauer an, wie es funktionieren soll, genau ... – 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>

Quelle

2016-04-29 10:03:18 Ashokreddy

Es ist sehr hilfreich für mich, danke –

Alles, was Sie tun müssen, finden ist Attributwert zu bewerten:

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

In oben Ich gehe davon aus, dass Sie nicht wollen, zu habe einen isolierten Bereich. Wenn Sie aber es braucht (was ich würde Sie für diese Art von Richtlinien empfehlen), dann können Sie mit Zwei-Wege-Bindung:

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; 
});

Quelle

2016-04-29 09:42:47 dfsq

Ich denke, was Sie suchen, kann wie folgt erreicht werden:

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>

Quelle

2016-04-29 09:50:02

* "$ scope.ngMenu wird dein Array haben" * - nein, es Wird eine Zeichenfolge. – dfsq

ich habe geschrieben, ein einfaches Richtlinie Beispiel, die Ihre Bedürfnisse passen:

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>

Quelle

2016-04-29 10:00:53 Vlad

Eine sehr einfache Richtlinie wiederverwendbarer die gewünschte Ausgabe als eine Liste angezeigt werden soll.

Angular Code

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>

Hoffentlich hilft es.

hier die Geige ist: http://jsfiddle.net/5sbb48fq/

Quelle

2016-04-29 11:07:06

Wie bekomme ich ein Array aus html mit eckiger Direktive?

Antwort

Verwandte Themen