함수를 매개 변수로 AngularJS 지시문에 전달하려면 어떻게해야합니까?

Question

문자열과 객체를 전달할 수 있지만 구성 가능한 옵션으로 사용하고있는 범위 객체에 콜백 함수를 추가 할 때 Angular가이를 제거합니다.

HTML :

<div ng-controller="DemoCtrl"> 
    scope.options = {{ options }} 
    <br><br> 
    <div my-directive="{{ options }}"></div> 
</div> 

JS : 당신의 도움에 대한 http://jsfiddle.net/revolunet/pHZNY/

감사 : 여기

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

app.controller('DemoCtrl', function($scope) { 
    $scope.options = { 
     test_str: 'test', 
     init_cb: function() { 
      alert('custom init callback'); 
     }, 
     apply_cb: function() { 
      alert('custom apply callback'); 
     } 
    }; 
}); 
app.directive('myDirective', ['$parse', function($parse) { 
    function link(scope, element, attrs) { 
     var options = attrs.myDirective; 
     scope.init(options); 
    } 

    return { 
     restrict: 'A', 
     transclude: true, 
     link: link, 
     controller: ['$scope', function($scope) { 
      $scope.defaults = { 
       init_cb: function() { 
        alert('default init callback'); 
       }, 
       apply_cb: function() { 
        alert('default apply callback'); 
       } 
      }; 
      $scope.settings = {}; 

      $scope.init = function(options) { 
       $scope.settings = $.extend({}, $scope.defaults, $scope.options); 

       // init cb. 
       $scope.settings.init_cb(); 

       // apply cb. 
       $scope.settings.apply_cb(); 
      }; 
     }] 
    }; 
}]); 

는 바이올린입니다.

Answer 1

방금 ​​범위에 실제 변수를 전달해야 할 때 당신은 단지 문자열이 될 수있는 ATTR를 사용하려고 : 갱신으로

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

app.controller('DemoCtrl', function($scope) { 
    $scope.options = { 
     test_str: 'test', 
     init_cb: function() { 
      alert('custom init callback'); 
     }, 
     apply_cb: function() { 
      alert('custom apply callback'); 
     } 
    }; 
}); 
app.directive('myDirective', ['$parse', function($parse) { 


    return { 
     restrict: 'A', 
     transclude: true, 
     scope: { //use scope to pass in variables 
      options: '=myDirective' 
     }, 

     controller: ['$scope', function($scope) { 


      $scope.defaults = { 
       init_cb: function() { 
        alert('default init callback'); 
       }, 
       apply_cb: function() { 
        alert('default apply callback'); 
       } 
      }; 
      $scope.settings = {}; 

      $scope.init = function(options) { 
       $scope.settings = angular.extend({}, $scope.defaults, $scope.options); 

       // init cb. 
       $scope.settings.init_cb(); 

       // apply cb. 
       $scope.settings.apply_cb(); 
      }(); 
     }] 
    }; 
}]);