无法将数据从控制器正确绑定到自定义指令模板 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 处理此搜索栏的范围，但我在将数据绑定到另一个模板（即我的 searchResults 模板）时遇到了一些问题。我的 SearchController 调用我编写的服务，该服务检索一些数据并且工作正常。但是，当我尝试将数据绑定到我的 SearchResults 页面时，Angular 不会绑定从服务接收到的任何数据（尽管它会在控制台中注销正确的数据）。

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

控制器：

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);
    };
}]);

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

Answer 1

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

指令：

controller: 'searchController',
controllerAs: 'searchCtl'

控制器：

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>