Редактировать: Хорошо, не уверен, зачем вам это нужно, но я заставил его работать: https://plnkr.co/edit/uR9s5vUJxQoviTiUD2vj?p=preview
И то же самое, но с использованием директивы: https://plnkr.co/edit/Onh2WonmarpUscnFFLGK?p=preview
Конец редактирования
Вы должны передать переменную в "my-options" (назовем это dropDownOptions):
<my-bootstrap-drop-down
my-label="Some label"
my-options="dropDownOptions" >
</my-bootstrap-drop-down>
И массив dropDownOptionsдолжен содержать данные, которые вам нужны в директиве, но только данные, а не функцию: [{"label": "Option 1", "params": {"p1": 1, "p2": 25}}, ...]
Теперь внутри вашей директивы вы имеете доступ к данным и можете работать над частью действия / функции.Пример:
var testApp = angular.module('testApp', []);
testApp.controller('mainCtrl', ['$scope',
function ($scope) {
$scope.test = "Hi";
$scope.dropDownOptions = [{"name": "yes", "value": 2}, {"name": "no", "value": 25}];
}]);
testApp.directive('myBootstrapDropDown', function () {
return {
restrict: 'E',
scope: {
myLabel: '@',
myOptions: '='
},
controller: function ($scope) {
$scope.myMethod = function (val) {
alert("There was a change, new value: " + val);
};
},
template: '<label>{{myLabel}}</label> <select name="myLabel" ng-model="myValue" ng-options="opt.value as opt.name for opt in myOptions" ng-change="myMethod(myValue)"><option value=""> </option></select>'
};
});
<!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Sample</title>
<style>
.starter-template {
padding: 10px 15px;
text-align: center;
}
a {
font-size: 11px;
cursor: pointer;
}
</style>
</head>
<body>
<div ng-controller="mainCtrl">
<div class="container">
<div class="starter-template">
<h1>Example</h1>
<p class="lead">{{test}}</p>
<my-bootstrap-drop-down
my-label="Some label"
my-options="dropDownOptions" >
</my-bootstrap-drop-down>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Обратите внимание, что метка связана с "@", а массив - с "=".
Так что вам не нужно связывать функцию с вашей директивой,если директиве не нужно запускать что-либо обратно в контроллере, в этом случае вы должны поместить функцию в отдельный атрибут (который в этом случае будет связан с &, как вы упомянули).
Например,:
var testApp = angular.module('testApp', []);
testApp.controller('mainCtrl', ['$scope',
function ($scope) {
$scope.test = "Hi";
$scope.dropDownOptions = [{"name": "yes", "value": 2}, {"name": "no", "value": 25}];
$scope.runThis = function (val) {
//Do Something here
alert("There was a change, new value: " + val);
};
}]);
testApp.directive('myBootstrapDropDown', function () {
return {
restrict: 'E',
scope: {
myLabel: '@',
myOptions: '=',
myFunction: "&"
},
controller: function ($scope) {
$scope.myMethod = function (val) {
$scope.myFunction()(val);
};
},
template: '<label>{{myLabel}}</label> <select name="myLabel" ng-model="myValue" ng-options="opt.value as opt.name for opt in myOptions" ng-change="myMethod(myValue)"><option value=""> </option></select>'
};
});
<!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Sample</title>
<style>
.starter-template {
padding: 10px 15px;
text-align: center;
}
a {
font-size: 11px;
cursor: pointer;
}
</style>
</head>
<body>
<div ng-controller="mainCtrl">
<div class="container">
<div class="starter-template">
<h1>Example</h1>
<p class="lead">{{test}}</p>
<my-bootstrap-drop-down
my-label="Some label"
my-options="dropDownOptions"
my-function="runThis" >
</my-bootstrap-drop-down>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Обратите внимание на "() (val)" в контроллере директивы.Если вам не нужно передавать какое-либо значение исходному контроллеру, просто замените его на «() ()».
Надеюсь, это поможет, если вы все еще застряли, вам следует поделиться большим количеством своихкод (например, код вашей директивы и html), чтобы мы могли ответить лучше.