Question

我遇到angularJS的问题。

我有一个执行循环的控制器。对于列表中的每个元素，我都会显示所有信息在每个循环中，我添加了另一个控制器（我猜这不是最佳实践）。

我想从内部控制器访问外部控制器的数据现在，我不介意通过在html代码上分配元数据或通过控制器中的javascript代码来实现这一点。

这就是我所做的：

<div ng-controller="PostListCtrl">




        <div ng-repeat="e in posts"  class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
            <div class="galleryElement effect6">
                <div class="innerGalleryElement">
                    <div>
                        <img class="img-responsive" src="" /><!--{{e.Post.cover}}-->
                    </div>
                    <div class="lowerBarHolder">
                        <div class="float-left avatar">
                            <div class="shadow">
                                <img src="{{e.Post.author_avatar}} " />
                            </div>
                        </div>
                        <div class="float-left description">
                            {{e.Post.title}} <br />
                             {{e.Post.author}}
                        </div>
                         <div ng-controller="PostHeart" class="likeHolder" ng-init="isActive={{e.Post.isActive}}">
                             <button ng-click="toggleActive($index)" 
                             ng-class="{true: 'loveButtonActive', false: 'loveButton'}[isActive]" 
                               class="">&#x2764;</button> 

                        </div>
                    </div>
                </div>
            </div>
        </div>

此代码：ng-init="isActive={{e.Post.isActive}}并不像预期的那样工作我还尝试使用data-myData="{{e.Post.isActive}}进行分配，但在运行时，当我尝试从控制器访问myData时，它确实访问了字符串{{e.Post.isActive}}，而不是访问该占位符的替换。

有什么想法吗？

Answer 1

创建指令：

yourModule.directive('postHeart', function() {
    return {
        restrict: 'E',
        scope: {
            'e': '=',
            'index': '='
        },
        controller: function($scope) {
            var isActive = $scope.e.Post.isActive;
            $scope.btnClass = isActive ? 'loveButtonActive' : 'loveButton';

            $scope.toggleActive = function(index) {
                var postId = $scope.e.Post.id;  // access data from the parent controller
                // ...
            };
        },
        template: "<button ng-click=\"toggleActive(index)\" ng-class=\"btnClass\">&#x2764;</button>"
    };
});

然后在模板中使用它：

<div ng-controller="PostListCtrl">
<div ng-repeat="e in posts"  class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
    <div class="galleryElement effect6">
        <div class="innerGalleryElement">
            <div>
                <img class="img-responsive" src="" /><!--{{e.Post.cover}}-->
            </div>
            <div class="lowerBarHolder">
                <div class="float-left avatar">
                    <div class="shadow">
                        <img src="{{e.Post.author_avatar}} " />
                    </div>
                </div>
                <div class="float-left description">
                    {{e.Post.title}} <br />
                    {{e.Post.author}}
                </div>
                <post-heart e="e" index="$index" class="likeHolder"></post-heart>
            </div>
        </div>
    </div>
</div>

如何访问循环内的父控制器数据

1 个答案: