javascript - 无法将数据从 Controller 正确绑定(bind)到自定义指令模板，Angular

Question

所以我在自己的模板中有搜索栏的代码，我在自定义指令中有。然后我将该指令放入我的导航栏模板中。

<form class="navbar-form navbar-left" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search" ng-model="searchText">
    </div>
    <button type="submit" class="btn btn-default" ng-click="go('/searchResults')">Submit</button>
</form>

.

    .state('searchResults', {
            url: '/searchResults',
            templateUrl: 'templates/searchResults.html',
            controller: 'searchController'
        })
}]).

directive('searchBar', function() {
  return {
    restrict: 'E',
    templateUrl: 'templates/search.html',
    controller: "searchController"
  }
});

我的 SearchController 处理此搜索栏的范围，但我在将数据绑定(bind)到另一个模板(即我的 searchResults 模板)时遇到了一些问题。我的 SearchController 调用我编写的服务，该服务检索一些数据并且工作正常。但是，当我尝试将数据绑定(bind)到我的 SearchResults 页面时，angular 不会绑定(bind)从服务接收到的任何数据(尽管它会控制台注销正确的数据)。

Name: {{player.playerName}}<br>
Link: {{player.link}}<br>
Things: {{things}}<br>

Controller :

angular
.module('app')
.controller('searchController', ['$scope',"$http","$location", "PlayerDAO", function($scope, $http, $location, PlayerDAO){

    $scope.things="stuff";

    $scope.go = function ( path ) {
        if(checkSearchBar()){   
            $location.path( path );
            PlayerDAO.getPlayers($scope.searchText).then($scope.postPlayerToResultsPage, onError);
        }
    };

    $scope.postPlayerToResultsPage=function(result){
        $scope.player=result;
        $scope.things="Hooray, it worked";
        $scope.player.playerName;
        console.log(result);
    };
}]);

然而对我来说奇怪的是，它会绑定(bind)任何不在我用来获取数据的函数中的数据(即它会绑定(bind){{things}})，但我的函数“postPlayerToResultsPage”中的任何数据，没有被 Angular 看到。如果我获取搜索栏的代码并将其直接放入我的搜索结果页面，则该页面上出现的导航栏可以完美运行，但是我需要搜索栏位于我的主导航模板上，可以在所有页面。

Answer 1

我怀疑由于指令的 $scope 的原型(prototype)性质，您的数据不具有约束力。 尝试使用 controllerAs 语法进行数据绑定(bind)以避免 $scope 歧义。例如

指令:

controller: 'searchController',
controllerAs: 'searchCtl'

Controller :

var controller = this;

$scope.postPlayerToResultsPage=function(result){
    controller.player=result;
    controller.things="Hooray, it worked";
    controller.player.playerName;
    console.log(result);
};

html:

Name: {{searchCtl.player.playerName}}<br>
Link: {{searchCtl.player.link}}<br>
Things: {{searchCtl.things}}<br>