嵌套指令未显示。 AngularJS

Question

我正在创建一个菜单，根据视图，它将显示正确的链接。所以从下面的代码来看，当父作用域startCtrl、$scope.viewActions的值发生变化时，它将用于选择正确的菜单模板，该模板将显示在菜单侧边栏上。

我遇到的问题是我的嵌套指令模板没有显示在 mobile-side-bar 指令上。 此外，我得到一个：

错误：[$parse:syntax] 语法错误：从 [{playerSearchSpinnerOn}}] 开始的表达式 [{{playerSearchSpinnerOn}}] 的第 2 列中的标记“{”无效键

当试图将这个 scope.playerSearchSpinnerOn 绑定到我的 'startCtrl' 的子范围时

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

范围层次结构：

StartCtrl(根控制器)

• （mobile-side-bar 指令）（指令 - 隔离范围）

• AddUsersController(controller)（通过ng-view显示视图

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

代码

开始控制

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

 }]);

添加用户控件

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

MobileSideBar 指令

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

        },
        controller: function ($scope, menuService) {
            // code here
        },
        templateUrl: '/Js/MonopolyMenu/mobileSideBar.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;
                        });

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

HTML

<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>

如何获得广告游戏和其他嵌套指令以在 mobile-side-bar 指令中显示其模板？

Answer 1

要使用 '=' 将值从父控制器传递到嵌套指令，请不要使用插值。查看this question的答案。

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

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

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

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

scope: {
    playerSearchSpinnerOn: '='
}