Question

所以我在自己的模板中有一个搜索栏的代码，我在自定义指令中有这个代码。然后我将该指令放在我的Navbar模板中。

<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模糊。 e.g。

指令：

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>

无法将数据从控制器正确绑定到自定义指令模板，Angular

1 个答案: