отправлять функции директиве в директиве

В моем проекте AngularJS я могу передать функции области в директиву, если директива используется видом верхнего уровня. Я также могу успешно передать параметры этим функциям, ссылаясь на синтаксис ({obj: mapping}).отправлять функции директиве в директиве

Если используется директива более высокого уровня и что директива более высокого уровня должна передать функцию директиве низкого уровня (внутренняя), я имею ограниченный успех. Я могу передать функции области, если функции области не нуждаются в параметре при вызове директивы низкого уровня. Однако мне не удалось заставить директиву нижнего уровня передавать параметр, если функция scope принимает параметр.

Я пробовал много вариантов синтаксиса для передачи функций на разных уровнях, используя(), не используя(), используя placeholder в разных местах, используя сопоставление объектов по директиве ({someData: 'arg'}).

Приведенный ниже пример работает, но как его изменить, чтобы передать аргумент в директиве низкого уровня?

Адрес plnkr demo.

JS код

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

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'placeholder'; 

    $scope.setName = function(aName) { 
    aName = aName || 'it was undefined'; 
    $scope.name = aName; //wish i could make this be 'low level' 
    }; 
}); 

app.directive('lowLevel', function() { 
    return { 
    // todo: pass arg, e.g. action('low level') 
    template: '<div><span ng-click="action(\'low level\')">click me once</span></div>', 
    scope: { 
     action: '&' 
    } 
    } 
}); 

app.directive('highLevel', function(){ 
    return { 
    template: '<div><low-level action="func({val: \'high level\'})"></low-level></div>', 
    scope: { 
     func: '&' 
    } 
    } 
});

использование HTML

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <p>Hello {{name}}!</p> 
    <high-level func="setName(val)"></high-level> 
    </body> 

</html>

источник

2015-05-24 cyrf

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'placeholder'; 
 
    
 
    $scope.setName = function(aName) { 
 
    aName = aName || 'it was undefined'; 
 
    $scope.name = aName; //wish i could make this be 'low level' 
 
    }; 
 
}); 
 

 
app.directive('lowLevel', function() { 
 
    return { 
 
    // todo: pass arg, e.g. action('johnny') 
 
    restrict:'E', 
 
    template: '<div><span ng-click="action({val: \'low level\'})">click me once</span></div>', 
 
    scope: { 
 
     action: '&' 
 
    } 
 
    } 
 
}); 
 

 
app.directive('highLevel', function(){ 
 
    return { 
 
    restrict:'E', 
 
    template: '<div><low-level action="func({val: val})"></low-level></div>', 
 
    scope: { 
 
     func: '&' 
 
    } 
 
    } 
 
});

/* Put your css in here */ 
 

 
span:hover { 
 
    background-color: red; 
 
} 
 

 
span { 
 
    border: 3px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app="plunker"> 
 
<body ng-controller="MainCtrl"> 
 
    <p>Hello {{name}}!</p> 
 
    <high-level func="setName(val)"></high-level> 
 
</body> 
 
</html>

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

template: '<div><low-level action="func({val: val})"></low-level></div>',

источник

2015-05-24 22:54:37 shaunhusain

отправлять функции директиве в директиве

ответ

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