Question

这是我的标记

    <div id="username" ng-controller="quickUserAdd">
    <h1>User</h1>
    <input placeholder="your full name" ng-model="fullname">
    <div ng-show="fullname">
        <div>
            <span class="big">Username</span>
            <span class="small">{{username()}}</span>
        </div>
        <div class="password-{{passwordStatus()}}">
            <input type="password" ng-model="password" placeholder="Password"/>
            <span class="small">{{passwordStatus()}}</span>
        </div>
    </div>
</div>

我的控制员：

    var passwordStrengths = ["weak", "medium", "ok", "great"];
    function quickUserAdd($scope)
    {
        $scope.password = "";
        $scope.fullname = "";
                   ....
    }

如何将$ scope.fullname，$ scope.username和$ scope.password绑定到 installation.user [0] （其中安装是全局对象），以便在任何更改时全名，用户名或密码，它们在installation.user [0]（也是一个对象）中更新？

Answer 1

我确信你很清楚全局变量的问题所以我假设你没有其他选择，在你的用例中你需要访问一个全局定义的JavaScript对象。

在您的情况下，最简单的方法可能就是在控制器的范围内公开installation.user[0]，如下所示：

function quickUserAdd($scope) {
   $scope.user = installation.user[0];
   ....
}

然后绑定到user对象的属性，如下所示：

<input placeholder="your full name" ng-model="user.fullname">
<input type="password" ng-model="user.password" placeholder="Password">

这样，输入框中的任何更改都应该立即传播到全局变量。

请注意，如果您想要更改AngularJS世界之外的全局变量并且UI仍然更新，则必须将此更改包装到Scope.$apply()方法中。

如果我还可以建议一件事：通常人们倾向于以大写字母开头命名AngularJS控制器并添加Ctrl后缀，以便控制器可以命名为QuickUserAddCtrl;

Answer 2

我真正需要的是共享服务。

这允许我在控制器之间共享数据结构，在这种情况下，在QuickUserAdd（快速添加一个用户）和UsersEditor之间共享用户（在应用程序的不同页面中修改用户的整个列表）。

此外，我可以使用pkozlowski.opensource的解决方案（在init时引用外部对象）将我的所有服务附加到“安装”中的对象。和Scope。永远不需要$ apply（），因为安装对象只需要能够一次读取从UI收集的所有数据。

将全局对象绑定到Angular中的控制器

2 个答案: