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("");
}

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

1 个答案: