AngularJS 两个控制器...在页面加载时克服 $scope.$on

Question

我仍然对 AngularJS 感到困惑。我有一个非常基本的页面，它有两个控制器。一个有文本输入来获取标签（用于搜索）。另一个调用 http.get()，使用标签来获取图像……它做了一些排序，然后显示出来。按照下面页面上的一些信息，我想出了一些东西。 Can one controller call another?

警告：它需要 onClick() 才能执行。一般来说，我希望它在页面加载时加载零标签......并在点击标签后加载。我在这里的其他线程中看到了一些建议，但我不太确定在这种情况下如何将它们拉下来。 imagesController 在加载时运行，但当然不会超过 'handleBroadcast' 位。

var myModule = angular.module('myModule', []);
myModule.run(function($rootScope) {
    $rootScope.$on('handleEmit', function(event, args) {
        $rootScope.$broadcast('handleBroadcast', args);
    });
});

function tagsController($scope) {
    $scope.handleClick = function(msg) {
        $scope.tags = msg;
        $scope.$emit( 'handleEmit', { tags: msg });
    };
}

function imagesController($scope,$http) {

    $scope.$on('handleBroadcast', function(event, args) {
        $scope.tags = args.tags;
        var site = "http://www.example.com";
        var page = "/images.php";

        if ( args.tags ) {
            page += "?tags=" + $scope.tags;
        }

        $http.get(site+page).success( function(response) {

            // SNIP

            $scope.data = response;
        });
    });
}

HTML 非常简单。稍微简化了一点，但应该足够了。

<form name="myForm" ng-controller="tagsController">
    <div class="left_column">
    <input class="textbox_styled" name="input" data-ng-model="tags"><br>
    <button ng-click="handleClick(tags);">Search</button><br>
    </div>
</form>


<div class="centered" data-ng-controller="imagesController">
    <span class="" data-ng-repeat="x in data">
    {{x}}
    </span>
</div>

Answer 1

不确定我是否完全理解，但如果你想在加载时不显示标签，只需在控制器加载时发出事件：

function tagsController($scope) {
    $scope.handleClick = function(msg) {
        $scope.tags = msg;
        $scope.$emit( 'handleEmit', { tags: msg });
    };
    $scope.$emit( 'handleEmit', { tags: "" }); // or $scope.handleClick("");
}