2015-06-26 5 views
7

Ниже мой HTML шаблон:значения при переходе от директивы к контроллеру

<div ng-app="dr" ng-controller="testCtrl"> 
    <test color1="color1" data-method="ctrlFn(msg)"></test>  
</div> 

Ниже мой код:

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

app.controller("testCtrl", function($scope) { 
    $scope.ctrlFn = function(arg) {   
     alert(arg); 
    } 

}); 
app.directive('test', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      fromDirectiveFn: '&method' 
     }, 
     link: function(scope, elm, attrs) { 
      //Way One 
      scope.hello = "some message"; 
      scope.fromDirectiveFn(scope.hello); 
     } 
    } 
}); 

<div ng-app="dr" ng-controller="testCtrl"> 
    <test color1="color1" data-method="ctrlFn(msg)"></test>  
</div> 

Почему я получаю «неопределенными» вместо "некоторых сообщений "

Ниже приводится сценарий http://jsfiddle.net/j2K7N/27/

ответ

10

Ваш код почти правильно, однако у вас было несколько вопросов здесь:

<test color1="color1" data-method="ctrlFn(msg)"></test> 

Здесь вы передаете функцию ctrlFn() из контроллера, который принимает один аргумент неопределенной msg, который вызывает тревожное сообщение с «неопределенным» текстом. Я предлагаю, чтобы изменить HTML код для этого:

<test color1="color1" data-method="ctrlFn"></test> 

Обратите внимание, что я прохожу ctrlFn в качестве переменной, а не функции.

В вашем директивном коде я изменил привязку области к =, чтобы убедиться, что ctrlFn будет указывать на функцию вашего контроллера. Это также устанавливает двустороннюю привязку между областью действия директивы и областью контроллера (родителя). Тогда весь JS код директивы будет выглядеть следующим образом:

app.directive('test', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      fromDirectiveFn: '=method' 
     }, 
     link: function(scope, elm, attrs) { 
      //Way One 
      scope.hello = "some message"; 
      scope.fromDirectiveFn(scope.hello); 
     } 
    } 
}); 

Просто заменив & на =. Рабочая вилка: http://jsfiddle.net/L8masomq/

2

его немного причуда ... подробнее об этом here

то, что вам нужно сделать, это - изменение ниже

scope.fromDirectiveFn(scope.hello); 

в

scope.fromDirectiveFn({'msg' : scope.hello}); 

имена переменных должны быть то же самое в вызывающем абоненте & callee

Смежные вопросы