Question

我正在创建一个菜单，根据视图，它将显示正确的链接。因此，从下面的代码中，当父范围public static Task<T> AsyncPattern(Func<T> func) { var tcs = new TaskCompletionSource<T>(); try { tcs.SetResult(func()); } catch (Exception e) { tcs.SetException(e); } return tcs.Task; }，startCtrl值更改时，它将用于选择正确的菜单模板，该模板将显示在菜单侧栏上。

我遇到的问题是我的嵌套指令模板没有显示在$scope.viewActions指令上。我还得到了一个：

错误：[$ parse：syntax]语法错误：从[{playerSearchSpinnerOn}}开始的表达式[{{playerSearchSpinnerOn}}]第2列的令牌'{'无效键<]

尝试绑定此scope.playerSearchSpinnerOn时，这是一个子节点'startCtrl'到我的

mobile-side-bar

范围层次结构：

StartCtrl（根控制器）

（mobile-side-bar指令）（指令 - isoloated范围）
AddUsersController（控制器）（通过ng-view显示视图

然后是mobile-side-bar指令的嵌套指令

代码

StartCtrl

  <advertise-game playersearchspinneron={{playerSearchSpinnerOn}}></advertise-game>

AddUsersCtrl

  monopolyMenuModule.controller('StartCtrl', ['$scope', 'startMenuServices','startMenuHeaderBar', function ($scope, services,startMenuHeaderBar,viewNamesEnum) {
    $scope.viewActions = "";

 }]);

MobileSideBar指令

monopolyMenuModule.controller('AddUsersCtrl', ['$scope', 'addUserServices', 'GameGroupDetails', 'viewNamesEnum', function ($scope, service, GameGroupDetails, viewNamesEnum) {

     // add code to call notifyUsers object.. watch pluralsight "connecting our server to client" and "how signalr works"
     $scope.playerSearchSpinnerOn = false;

     $scope.$parent.viewActions = "addUsers.html";
}]);

广告 - 游戏指令

monopolyMenuModule.directive('mobileSideBar', function () {
    return {
        restrict: "E",
        transclude: true,
        scope: {

        },
        controller: function ($scope, menuService) {
            // code here
        },
        templateUrl: '/Js/MonopolyMenu/mobileSideBar.html'
    }
});

HTML

monopolyMenuModule.directive('advertiseGame', ['GameGroupDetails', function (GameGroupDetails) {
    return {
        restrict: "E",
        scope: {
            playerSearchSpinnerOn: "=",
        },
        template: "<div ng-click='advertiseGame()>Advertise Game</div>",
        controller: function ($scope) {
            $scope.advertiseGame = function () {
                if (GameGroupDetails != null) {
                    service.FindUsers(GameGroupDetails).done(function () {
                        // add spinner once group has been show in invite screen
                        // apply is needed and apply is only called in angularjs directives
                        $scope.$apply(function () {
                            $scope.playersearchspinneron = true;
                        });

                    });
                }
            };
        }
    }
}]);

如何获得广告游戏和我的其他嵌套指令以在<div id="mainContainer" ng-controller="StartCtrl"> <div id="menuContainer"> <mobile-side-bar id="menu" class="hideElement"> <div ng-include src="viewActions"></div> </mobile-side-bar> </div> // AddUsers.html comes from $routeProvider and binding addUsersCtrl <div ng-view class="view-animate"></div> </div> <script type="text/ng-template" id="addUsers.html"> <advertise-game player-search-spinner-on="playerSearchSpinnerOn"> </advertise-game> <invite-friend></invite-friend> <player-search></player-search> </script>指令中显示其模板？

Answer 1

要使用＆＃39; =＆＃39;将值从父控制器传递到嵌套指令，您不必使用插值。请参阅this question的答案。

另外，要小心骆驼和连字符之间的切换。通常js中的变量使用camel，而html属性使用连字符。

我建议将指令调用更改为：

<advertise-game player-search-spinner-on="playerSearchSpinnerOn"></advertise-game>

指令定义应该在scope参数中有驼峰大小写。

scope: {
    playerSearchSpinnerOn: '='
}

嵌套指令未显示。 AngularJS

1 个答案: