6

JavaScript の経験はほとんどありません。アイテムをクリックしてメニューを追加する必要があります。ブートストラップ コンポメントや JQuery などのライブラリを使用せずに、ゼロからビルドするように依頼されました。

Angularjs を使用しています。angularでは、新しい要素を作成する正しい方法を知りたいです。私たちがしなかったような何かdocument.createElement。

私がやりたいことをよりよく理解できるように、いくつかのコードを追加しています。

メニュー指令

.directive('menu', ["$location","menuData", function factory(location, menuData) {
    return {
        templateUrl: "partials/menu.html",
        controller: function ($scope, $location, $document) {
            $scope.init = function (menu) {
                console.log("init() called");
                console.log("$document: " + $document);

                if (menu.selected) {
                    $scope.tabSelected(menu);
                }
            }
            $scope.creteMenu = function(menuContent){
                //This is to be called when the action is an array.
            }
            $scope.tabSelected = function(menu){
                $location.url(menu.action);
                $scope.selected = menu;
            }
            $scope.click = function (menu) {
                if (typeof (menu.action) == 'string') {
                    $scope.tabSelected(menu);
                }
            }
        },
        link: function (scope, element, attrs) {
            scope.menuData = menuData;
        }
    };
}])

サービス中のメニューデータ。

.value('menuData', [{ label: 'Process-IDC', action: [] }, { label: 'Dash Board', action: '/dashboard', selected: true }, { label: 'All Jobs', action: '/alljobs', selected: false }, { label: 'My Jobs', action: '/myjobs', selected: false }, { label: 'Admin', action: '/admin', selected: false }, { label: 'Reports', action: '/reports', selected: false }]);

Process-IDC メニューのアクションが配列であることに気付いた場合は、アクションを含むメニューがさらに含まれているため、サブ メニューで開く必要があります。

Menu.html (部分)

<ul class="menu">
    <li ng-class="{activeMenu: menu==selected}" ng-init="init(menu)" data-ng-click="click(menu)" data-ng-repeat="menu in menuData">{{menu.label}}</li>
</ul>
4

5 に答える 5

4

これはどちらも非常に単純ですが、どこから始めればよいかわからない場合は、複雑なものもあります - チュートリアルを見て、それを最初から最後までフォローすることをお勧めします:ソリューションを説明するために使用される技術用語を理解するのに役立つ、Angular に関するすべての概念を紹介します。

まったく新しいメニュー項目を作成している場合、コントローラーでメニューが次のようなものである場合:

// An Array of Menu Items
$scope.menuItems = [{name: 'Item One',link: '/one'},{name: 'Item Two',link:'/two'}]; 

// Add a new link to the Array
$scope.addMenuItem = function(theName,theLink){
    $scope.menuItems.push({name: theName,link:theLink}); 
}

テンプレートでは、ng-repeat 内の配列を使用してメニューを作成します。

<ul>
  <li ng-repeat="menuItem in menuItems">{{menuItem.name}}</li>
</ul>

非表示になっている可能性のあるアイテムの表示を切り替えるだけの場合は、ng-ifまたはng-showを使用できます。

于 2013-11-11T13:51:19.813 に答える
2

ディレクティブでそれを行っていて、角度のあるdom要素があると仮定すると、次のことができます

element.append("<div>Your child element html </div>");
于 2013-11-11T13:42:27.473 に答える