Question

如何将我的指令$ scope.posts冒泡到我的根范围，以便我的视图更新指令刚刚获取的数据？

var lassoDirectives = angular.module('lassoDirectives', []);
lassoDirectives.directive('autoTable', ['getitems', function() {
    return {
        restrict: 'AE',
        scope: {
            data: '=',
            modelname: '=',
        },
        templateUrl: 'http://local.angular.com/webroot/app/templates/directives/auto-table.html',
        controller: function($scope, getitems) {
            //console.log(parse);
            $scope.deleteItem = function(id) {
                items = getitems.delete({type: $scope.modelname, Id: id});
                posts = getitems.query({type: $scope.modelname});

            }
            $scope.check = function() {
                console.log($scope.data);
                $scope.posts = getitems.query({type: $scope.modelname});
            }
        }
    };
}]);

Answer 1

您应该尝试做的是尽可能保持应用程序的模块化。在您的情况下，从您的应用程序的其他部分访问$scope.posts将破坏这种模块性。

事件模式之类的东西适合。你可以emit来自你的指令的事件，它可以被任何事物消耗，允许解耦。例如：

$scope.$emit('posts_arrived', { posts: thePosts });

Emit将从层次结构中的当前位置冒泡到根节点。如果您想确保应用程序的任何部分可以使用该活动，您可以$broadcast $rootScope {/ 1}}。

阅读scope docs了解详情。

Answer 2

在"Comprehensive Directive API" of AngularJS documentation中说：

<强>＆安培;或＆amp; attr - 提供了一种在上下文中执行表达式的方法父范围。如果未指定attr名称，则为属性名称假定与本地名称相同。给定范围的小部件定义：{ localFn：'＆amp; myAttr'}，然后隔离范围属性localFn将指向 count = count + value表达式的函数包装器。经常希望通过表达式从隔离范围传递数据在父范围内，可以通过传递本地地图来完成变量名和值到表达式包装器fn中。例如，如果表达式是增量（金额），那么我们可以指定金额通过将localFn调用为localFn（{amount：22}）来获取值。

所以，也许这就是你想要的：

按如下方式编写HTML：

&lt;auto-table modelname="amodelname" collect-posts = "CollectPosts(posts)"&gt;&lt;/auto-table&gt;

写下你的指令代码：

var lassoDirectives = angular.module('lassoDirectives', []);
lassoDirectives.directive('autoTable', ['getitems', function(getitems) {
    return {
        restrict: 'AE',
        scope: {
            data: '=',
            modelname: '=',
            sendBackPosts: '&collectPosts'
        },
        templateUrl: 'http://local.angular.com/webroot/app/templates/directives/auto-table.html',
        link: function(scope, iElement, iAttrs) {
                //...
                scope.posts = getitems.query({type: scope.modelname});
                scope.sendBackPosts({posts: scope.posts});
        }
    };
}]);

在控制器代码中（可能在单独的文件中），写下：

var lassoDirectives = angular.module('lassoDirectives'); // pay attention here: no '[]' to use a defined module.
lassoDirectives.controller('MyController', ['$scope',function($scope) {
    $scope.CollectPosts = function( posts ){
        for( var i = 0 ; i < posts.length; i ++ ){
            //...
        }
    }
}]);

备注：

i）要注入像getitems这样的服务，你不仅需要将它作为字符串放在数组中，还需要将它放在函数参数中。

ii）在代码中找到的控制器定义，即指令定义对象的“控制器”属性，与角度模块的控制器不同，您应该收集帖子。在开头提供的相同angularjs文档页面中，您可以找到有关指令定义对象的控制器属性的以下内容：


控制器

控制器构造函数。之前实例化控制器   预链接阶段，它与其他指令共享（见   要求属性）。这允许指令与之通信   彼此并增强彼此的行为。控制器是   注入（并支持括号表示法）与以下本地

我想，这可能不是你想要做的。从指令的名称，您可能想要获取一些数据并填充表。您应该在指令定义对象的link属性中定义DOM操作逻辑。

希望这会有所帮助。

将数据从指令传递到主控制器

2 个答案: