javascript - Angularjs: Callback to parent controller -
please consider following code: has directive myitem isolate scope. each item display button call delete() on directive controller. i'd trigger refresh in outer controller (appcontroller). of course refresh() function can not found, because of isolated scope.
<html> <body ng-app="question"> <div ng-cloak ng-controller="appcontroller"> <my-item ng-repeat="item in list" data="list"> </my-item> <input type="text" maxlength="50" ng-model="new_item" /> <button ng-click="add(new_item)">+</button> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <script> (function () { var app; app = angular.module('question', []); app.controller('appcontroller', [ '$scope', '$http', function ($scope, $http) { $scope.list = []; function refresh(){ $http.get('/api/items').then( function(response){ $scope.list = response.data; } ); } $scope.add = function(item){ $http.post('/api/items', { item: item }).then(refresh); }; refresh(); } ]); app.directive('myitem', function() { return { scope: { item: '=data', }, // directive template delete button template: '{{ item }} <button ng-click="delete(item)">-</button>', restrict: 'e', // directive controller delete function controller: [ '$scope', '$http', function($scope, $http) { $scope.delete = function (card) { // goes wrong! refresh not exist $http.delete('/api/items' + card.id).then(refresh); } }] }; }); })(); </script> </body> </html> one thing add ng-change myitem directive, involve requiring ngmodelcontroller seems overkill.
other things can think of:
add
onchange: '@'scopeattribute of directive, setonchange = refreshin html. call onchange expression instead of refresh insidedeletefunction. feels i'm re-implementingng-change?add
require: '^appcontroller'directive. guess callrefreshon parent controller directly. seems violates loose coupling.don't use isolate scope @ all. mean inherit parent scope ,
refreshavailable. directive implicitly assumes scope holditem. violates loose coupling, in implicit way.
so question is: correct way let parent controller know should refresh contents?
imo, first way best way. directive receives function callback outside executed directive when necessary. 2 directives loosely coupled. it's similar ng-change attribute used ng-model directive.
example: directive
app.directive('myitem', function() { return { restrict: 'e', scope: { item: '=data', myitemdeletecallback: '&myitemdeletecallback' }, template: '{{ item }} <button ng-click="delete(item)">-</button>', controller: [ '$scope', '$http', function($scope, $http) { $scope.delete = function (card) { // goes wrong! refresh not exist $http.delete('/api/items' + card.id).then(function () { $scope.myitemdeletecallback(); }); } }] }; }); usage: controller
app.controller('appcontroller', ['$scope', '$http', function ($scope, $http) { $scope.list = []; $scope.refresh = function (){ $http.get('/api/items').then( function(response){ $scope.list = response.data; } ); }; $scope.add = function(item){ $http.post('/api/items', { item: item }) .then($scope.refresh); }; refresh(); }]); usage: template
<div ng-cloak ng-controller="appcontroller"> <my-item my-item-delete-callback="refresh()" ng-repeat="item in list" data="list"> </my-item> <input type="text" maxlength="50" ng-model="new_item" /> <button ng-click="add(new_item)">+</button> </div>
Comments
Post a Comment