Question

我在AngularJS中遇到问题，我无法解决它。

我的html代码中有一个简单的搜索栏：

<html ng-app="webApp">
<body>
<div class="row" ng-controller="IndexController">
    <div class="col-lg-6 col-lg-offset-3 text-center">
            <form>
                <div class="input-group">
                    <input type="text" class="form-control" id="search_input" placeholder="Search for..." ng-model="search">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit" ng-click="research()"><i class="glyphicon glyphicon-search"></i></button>
                    </span>
                </div>
            </form>
            Search : {{search}}
            <span ng-bind="search"></span>
        </div>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="./static/javascripts/angular/angular.module.js" type="text/javascript"></script>
<script src="./static/javascripts/angular/controllers/index.controller.js" type="text/javascript"></script>
</html>

我的模块在外部文件中声明：

angular.module('webApp', ['ui.bootstrap', 'elasticsearch', 'angular-highlight']);

我有一个简单的控制器，它绑定搜索栏中的值：

angular.module('webApp').controller('IndexController', IndexController);

function IndexController($scope, $window, $http) {
$scope.search = '';

$scope.research = function(){
    console.log($scope.search);
    window.location.href = "http://localhost:4000/results?search=" + $scope.search + "&size=20";
};
}

所以我的问题是我的变量搜索在ng-bind指令中很好地呈现，但在{{}}之间根本没有。我的控制台没有错误。你知道为什么吗？

提前感谢您的帮助。

此致

Answer 1

注意＆＃34;范围汤＆＃34;。由于您将模块传递到应用程序中，因此非别名控制器可能具有相同的$ scope.search变量。我建议在控制器上标记控制器[例如。 IndexController作为IndexCtrl]并在控制器中将$ scope更改为此引用。

示例：

var vm = this; //preference

this.search = '';

this.research = function(){
    console.log(vm.search);
    window.location.href = "http://localhost:4000/results?search=" + vm.search + "&size=20";
};

此外，您将在标记中引用搜索变量，如下所示：

search: {{IndexCtrl.search}}

根据您的意图，您可能还需要将$ location服务注入控制器，并将 window.location.href（...）替换为 $ location.path（。 ..）

请记住，ngBind用于单向绑定，而ngModel用于双向绑定！

变量不在{{}}中呈现，而仅在ng-bind中呈现

1 个答案: