Javascript Angularjs：回调到父控制器请考虑下面的代码：它具有一个指令“代码> MyItIs具有隔离作用域。每个项目将显示一个按钮，该按钮将在指令控制器上调用delete（）。我希望这样可以触发外部控制器（AppController）中的刷新。当然，由于作用域是孤立的，所以找不到refresh（）函数 <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 with delete button template: '{{ item }} <button ng-click="delete(item)">-</button>', restrict: 'E', // directive controller with delete function controller: [ '$scope', '$http', function($scope, $http) { $scope.delete = function (card) { // This is where it goes wrong! refresh does not exist $http.delete('/api/items' + card.id).then(refresh); } }] }; }); })(); </script> </body> </html> + （功能（）{ var-app； app=angular.module（'问题'，[]）； app.controller（'AppController'[ “$scope”，“$http”，函数（$scope，$http）{ $scope.list=[]；函数刷新（）{ $http.get（'/api/items'）。然后( 功能（响应）{ $scope.list=response.data； } ); } $scope.add=功能（项）{ $http.post（'/api/items'，{item:item}）； }; 刷新（）； } ]); 应用程序指令（'myItem'，函数（）{ 返回{ 范围：{ 项目：'=数据'， }, //带删除按钮的指令模板模板：“{item}}-”，限制：'E'， //具有删除功能的指令控制器控制器：['$scope'，'$http'，函数（$scope，$http）{ $scope.delete=功能（卡）{ //这就是问题所在！刷新不存在 $http.delete（'/api/items'+card.id）。然后（刷新）； } }] }; }); })();_Javascript_Angularjs

Javascript Angularjs：回调到父控制器请考虑下面的代码：它具有一个指令“代码> MyItIs具有隔离作用域。每个项目将显示一个按钮，该按钮将在指令控制器上调用delete（）。我希望这样可以触发外部控制器（AppController）中的刷新。当然，由于作用域是孤立的，所以找不到refresh（）函数 <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 with delete button template: '{{ item }} <button ng-click="delete(item)">-</button>', restrict: 'E', // directive controller with delete function controller: [ '$scope', '$http', function($scope, $http) { $scope.delete = function (card) { // This is where it goes wrong! refresh does not exist $http.delete('/api/items' + card.id).then(refresh); } }] }; }); })(); </script> </body> </html> + （功能（）{ var-app； app=angular.module（'问题'，[]）； app.controller（'AppController'[ “$scope”，“$http”，函数（$scope，$http）{ $scope.list=[]；函数刷新（）{ $http.get（'/api/items'）。然后( 功能（响应）{ $scope.list=response.data； } ); } $scope.add=功能（项）{ $http.post（'/api/items'，{item:item}）； }; 刷新（）； } ]); 应用程序指令（'myItem'，函数（）{ 返回{ 范围：{ 项目：'=数据'， }, //带删除按钮的指令模板模板：“{item}}-”，限制：'E'， //具有删除功能的指令控制器控制器：['$scope'，'$http'，函数（$scope，$http）{ $scope.delete=功能（卡）{ //这就是问题所在！刷新不存在 $http.delete（'/api/items'+card.id）。然后（刷新）； } }] }; }); })();

javascript angularjs

Javascript Angularjs：回调到父控制器请考虑下面的代码：它具有一个指令“代码> MyItIs具有隔离作用域。每个项目将显示一个按钮，该按钮将在指令控制器上调用delete（）。我希望这样可以触发外部控制器（AppController）中的刷新。当然，由于作用域是孤立的，所以找不到refresh（）函数 <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 with delete button template: '{{ item }} <button ng-click="delete(item)">-</button>', restrict: 'E', // directive controller with delete function controller: [ '$scope', '$http', function($scope, $http) { $scope.delete = function (card) { // This is where it goes wrong! refresh does not exist $http.delete('/api/items' + card.id).then(refresh); } }] }; }); })(); </script> </body> </html> + （功能（）{ var-app； app=angular.module（'问题'，[]）； app.controller（'AppController'[ “$scope”，“$http”，函数（$scope，$http）{ $scope.list=[]；函数刷新（）{ $http.get（'/api/items'）。然后( 功能（响应）{ $scope.list=response.data； } ); } $scope.add=功能（项）{ $http.post（'/api/items'，{item:item}）； }; 刷新（）； } ]); 应用程序指令（'myItem'，函数（）{ 返回{ 范围：{ 项目：'=数据'， }, //带删除按钮的指令模板模板：“{item}}-”，限制：'E'， //具有删除功能的指令控制器控制器：['$scope'，'$http'，函数（$scope，$http）{ $scope.delete=功能（卡）{ //这就是问题所在！刷新不存在 $http.delete（'/api/items'+card.id）。然后（刷新）； } }] }; }); })();,javascript,angularjs,Javascript,Angularjs,我可以做的一件事是将ng更改添加到myItem指令中，但这需要ngModelController，这似乎有些过分我能想到的其他事情：将类似于onchange:'@'的内容添加到指令的scope属性中，然后在html中设置onchange=refresh。在delete函数中调用onchange表达式而不是refresh。但这感觉就像我在实施ng更改将require:'^AppController'添加到指令中。然后我想我可以直接在父控制器上调用refresh。这似乎违反了松耦合根本不要使

我可以做的一件事是将ng更改添加到myItem指令中，但这需要ngModelController，这似乎有些过分

我能想到的其他事情：

将类似于

onchange:'@'

的内容添加到指令的

scope

属性中，然后在html中设置

onchange=refresh

。在

delete

函数中调用onchange表达式而不是refresh。但这感觉就像我在实施

ng更改

将

require:'^AppController'

添加到指令中。然后我想我可以直接在父控制器上调用

refresh

。这似乎违反了松耦合

根本不要使用隔离作用域。这意味着我们从父范围继承，并且

refresh

可用。但是，我的指令隐式地假设作用域将包含一个

项。这也违反了松耦合，但以隐式方式


所以我的问题是：哪种方法是让父控制器知道它应该刷新其内容的正确方法？
在我看来，第一种方法是最好的方法。指令从外部接收函数回调，必要时由指令执行。这两个指令是松散耦合的。它类似于ng模型指令使用的属性ng change
示例：指令
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) {
                // This is where it goes wrong! refresh does not exist
                $http.delete('/api/items' + card.id).then(function () {
                    $scope.myItemDeleteCallback();
                });
            }
        }]
    };
});

用法：模板
<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>


+
如何使用$rootScope
？@iam解码器：我不知道$rootScope
，无法快速找到很多有用的文档。这对我有什么帮助？不管怎样，这个逻辑似乎是反向实现的。您想发出一个服务器调用以delete
，然后立即告诉父控制器它应该向服务器发出一个get
调用，以确定该项目确实被删除了？有很多方法可以在不涉及两个单独的服务器调用的情况下处理删除项的操作……事实上，在这种情况下，指令根本不应该负责删除项。替代方法包括使用服务来维护数据的状态，或者使用$broadcast
允许应用程序的其他区域响应更改。一般来说，最好尽可能限制与服务器通信的组件。谢谢！只是想知道，是不是应该是$scope.myItemDeleteCallback（）（前面添加了美元符号）？是的，很抱歉输入错误，谢谢注意。已经修好了，接受这个正确答案。尽管@Claies在上面的讨论中提出了一个有效的观点，但在我的例子中，他/她的推理是一个典型的陷阱例子，称为过早优化：）换句话说：在执行额外的GET时保持代码简单和干净对我来说没问题。
<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>