Как вызвать директиву при обновлении модели в AngularJS?
Я нашел хорошее решение для встроенного редактирования содержимого в угловых js, которое создается путем запуска ng-repeat на модели:https://stackoverflow.com/a/16739227/2228613
Чтобы расширить это решение, я добавил на страницу кнопку с директивой ng-click следующим образом:
Add Category
Функция addCategory определена в моем контроллере:
$scope.addCategory = function(){
var newCategory = {id:0, name:"Category Name"};
$scope.categories.unshift(newCategory);
}
Цель здесь - позволить пользователю добавить новую запись и автоматически вызвать директиву inline-edit, как только представление обновится новой строкой. Как я могу вызвать директиву inline-edit таким образом?
Ответы на вопрос(2)
которую ямы использовали, чтобы иметь логические значения изменения и иметь$watch на нем внутри директивы, которая должна быть запущена.
myApp.directive('myDirective', function () {
return function (scope, element, attr) {
scope.$watch('someValue', function (val) {
if (val)
// allow edit
else
// hide edit
});
}
});
Тогда в вашем контроллере выд установить$scope.someValue = true; в вашем нг-клик для кнопки.
plunker:http://plnkr.co/edit/aK0HDY?p=preview
UPDATEI»мы пошли немного дальше с ответом выше. Я'мы сделали что-то более похожее на то, что тыпосле.
Вот'Вот что значит:http://plnkr.co/edit/y7iZpb?p=preview
Это новая директива:
.directive('editCar', function ($compile) {
return {
restrict: 'E',
link: function (scope, element, attr) {
var template = '<span class="car-edit">'+
'<input type="text" ng-model="car.name">' +
'<button ng-click="someValue = false" class="btn btn-primary">Save</button></span>';
scope.$watch('someValue', function (val) {
if (val) {
$(element).html(template).show();
$compile($('.car-edit'))(scope);
}
else
$(element).hide();
});
}
}
})
Заменяет элемент с вышеуказанным шаблоном. Кнопка сохранения добавляет значения в массив с именемeditedCars, Я'оставил в некотором фиктивном коде для отправки всего$http.post()
restrict: 'E' имею в виду?http://plnkr.co/edit/uzuKki (Я работал над оригинальным пакетом, как вы упомянули.)
Моя идея
Добавлять "режим редактирования" свойство модели TODOВместо того, чтобы просто пройтиtodo.title к директивеs, передавая весь объект TODO, которыйinline-edit="todo" в index.htmlВ inline-edit.html меняйте каждыйeditMode вmodel.editMode (и каждыйmodel вmodel.title правильно отображать заголовок)В вашем контроллереadd метод, создать новый объект сeditMode = trueнапример,
var newTodo = {id:0, name:"TODO Name", editMode: true};
$scope.todos.unshift(newTodo);