2

AngularJS でディレクティブ ウィジェットを作成しようとしています。名前とアクションの k/v ペアの配列を渡して、親コントローラーでアクションをトリガーするボタンを表したいと思います。

私がこれまでに試したこと：

<div data-collapse-widget data-title="Templates" data-widget-themis="false" data-color="grey" data-buttons="[new:'test']">

^HTML でのディレクティブの開始

私のJavaScript（コーヒースクリプト）

Module.directive 'collapseWidget', () ->
      directive =
        restrict:   'A'
        transclude: true
        template:   viewCollapseWidget
        scope:
          title:        '@title'
          widgetThemis: '@widgetThemis'
          color:        '@color'
          buttons:      '&buttons'

        replace: true
        compile: (element, attrs, transclusionFunc) ->
          (scope, iterStartElement, attrs) ->

            scope.collapsed = false
            scope.toggle = () ->
              scope.collapsed = !scope.collapsed

            origElem   = transclusionFunc scope
            content    = origElem.text()
            scope.orig = content
            #scope.obj = my_custom_parsing(content)
            scope.obj  = content

しかし、明らかにこれは機能しません。誰も私がこれを行う方法を知っていますか?

4

1 に答える 1

2

投稿からviewCollapseWidgetが何であるかはわかりませんが、基本的な考え方は、「親」コントローラーにモデルをセットアップして、あなたが持っているボタンオブジェクトを含めることです

<div data-collapse-widget>

したがって、モデル値をディレクティブに渡すだけで、渡された関数を後でボタンに実行させることができます。このメソッドでは、親スコープをダーティにするのではなく、ディレクティブ スコープを分離することもできます。次のJsFiddleを投稿しました。

ディレクティブを挿入すると、ビューは次のようになります。

<div ng-controller="ParentCtrl">
   <div collapse-widget 
        title="Show / Collapse" 
        buttons="model.buttons"></div>
</div>

コントローラーのロジックとディレクティブは次のようになります。

angular.module('main', [])
.controller("ParentCtrl", ['$scope', function( $scope ){

    $scope.doSomething = function(){
        alert('do something called from parent');
    }
    $scope.doSomethingElse = function(){
        alert('do something else called from parent ');
    }

    $scope.model ={
        buttons: {
           'Test Button':     $scope.doSomething, 
           'Another Button':  $scope.doSomethingElse
        }
    }
}])

.directive("collapseWidget", function factory() {
   return {
     template: '<div ng-init="collapsed=true">'+
                 '<h2 ng-click="collapsed= {true: false, false: true}[collapsed]">{{title}}</h2>'+
                 '<button ng-hide="collapsed" '+
                        'ng-repeat="(name, fn) in buttons" ng-click="fn()">{{name}}</button>'+
               '</div>',
    replace: true,
    restrict: 'A',
    scope: {
      title: "@",
      buttons: "="
    },
    link: function postLink( scope, element, attrs ) {
      //do something else here
    }
  };
});
于 2013-04-22T06:53:54.330 に答える