Question

我的html文件中有以下设置::

<body>
    <nav ng-controller="loginCtrl">
        <div>
            <li>Apple</li>
            <li>Mango</li>
            <li>{{user}}</li>
        </div>
    </nav>

    <div ui-view></div>

</body>

我有一个导航菜单，ui-view显示不同的页面。

我还有一个控制器loginCtrl，其范围变量名为$scope.user。此控制器也在login.html文件的UI状态路由器中调用，以便登录表单可以使用其方法。

当用户登录时，我想使用上面的{{user}}在导航菜单中显示他的名字。您可以看到的导航菜单是可见的（静态），无论将在ui-view中加载的其他部分页面如何。

目前，它不起作用，我不知道为什么。

我的理解是login.html和导航菜单中的登录表单位于不同的文件中，因此可能是他们使用相同的控制器（在同一模块下），但可能在不同的范围/环境中运行（上午不太确定。）

这就是为什么我更新$scope.user的值，但它并没有出现在导航菜单中。

有人可以向我解释为什么它不起作用以及如何实现我的功能吗？

由于

Answer 1

使用单件服务共享相同的UserData对象：

app.service('UserData', function(){return {name: 'default'};});
app.controller('LoginController', function($scope, UserData){
    $scope.user = UserData;
});

现在，所有控制器实例都可以访问相同的UserData对象当user.name发生变化时，所有控制器都可以看到它。

Answer 2

我想知道是否有必要为你的ui-view和兄弟元素调用你的LoginController，当你可以将它加载到父元素上时

无论如何，您有几种解决方案可以实现双向绑定：

@vp_arth解决方案非常棒，通常用于在控制器之间共享数据
将ng-controller属性移动到公共父元素，如果需要，为login.html声明另一个控制器，该控制器将是您的LoginController的子控件。然后在父作用域中使用对象而不是变量：

$scope.user = {};

然后将其填入您的子范围，如下所示： $scope.user.name = ...

即使您使用与父AND子范围相同的控制器，您也应该使用以下内容： $ scope.user = $scope.user ? $scope.user : {};而不是$scope.user = {};

（如果不清楚我可以向你展示一个比较小提琴）

当我遇到像你这样的问题时，这个维基真的帮助了我：https://github.com/angular/angular.js/wiki/Understanding-Scopes

AngularJS控制器的问题

2 个答案: