Я пытаюсь сделать автозаполнение, для этого я использую теги-ввод. Название директивы - моя директива. Внутренний контроллер. Я пытаюсь вызвать функцию selectUser
, но он не работает.
В автозаполнении вы должны ввести 4 буквы, например: john, затем я покажу варианты.
Посмотреть
<body ng-app="myApp" ng-controller="appCtrl">
<my-directive apipoint="customerApi" modeldisplay="tags.selected" ng-model="tags.selected" change="selectUser(tags.selected)"></my-directive>
</body>
контроллер
app.controller("appCtrl", function($scope){
$scope.tags = {};
$scope.tags.selected = [];
$scope.customerApi = ['tags.json'];
$scope.selectUser = function(foo) {
$scope.aux = foo;
alert();
};
});
директива
app.directive("myDirective", ['$http',function($http){
return {
restrict: "E",
template : 'Here Use tag-input: <tags-input ng-model="modeldisplay"'+
'ng-change="change(modeldisplay)">'+
'<auto-complete source="loadTags($query)"></auto-complete>'+
'</tags-input>',
require: 'ngModel',
scope : {
modeldisplay: "=",
apipoint: "="
},
link : function(scope, element, attrs, ctrl){
scope.loadTags = function(query) {
return $http.get(scope.apipoint[0]);
};
scope.change = function(item){
ctrl.$setViewValue(item);
}
}
};
}]);
** DEMO/Now Working **
Еще одна вещь: мой подход я прав?, Причина, позади, что, в Angularjs View, я хочу использовать auto-complete директив oneline, я хочу сделать это как общий подход...
Некоторые изменения, которые вы должны сделать, чтобы запустить функцию контроллера.
Вот рабочий плункер Plunker
Вы использовали стороннюю директиву, которая не предусматривает ng-change. Да, но он предоставляет on-tag-added="change1(modeldisplay)
. Таким образом, ng-change
не работал.
Вы передали функцию в атрибуте изменения своей my-directive
и снова в вашей области действия была другая функция изменения, которая создавала непонимание.
Вы обращались к переданной функции с использованием области видимости, но вы не упомянули об этом в директивной изолированной области. То почему эта переданная функция была недоступна в области директивы.
Вам нужно что-то вроде этого?
Изменения в директиве:
link: function(scope, element, attrs, ctrl) {
scope.loadTags = function(query) {
return $http.get(scope.apipoint[0]);
};
scope.updateModel = function(item) {
ctrl.$setViewValue(item);
};
},
controller: ['$scope', function($scope) {
$scope.$watch('modeldisplay', function(newVal) {
$scope.updateModel(newVal);
});
}],
Прочтите это, если вам нужно больше объяснений:
scope.change
с помощью$scope.$apply(function)
-scope.change = function(item){ $scope.$apply(item()) }