javascript - 在服务场景中设置页面加载 $scope 值的正确方法是什么？

Question

我有一些登录信息需要在 Angular.js 支持的 UI 上的多个位置显示。为此，我设置了两个 Controller 来返回在 app.factory 中创建的服务对象。将其创建为服务的原因是为了让两个 Controller 共享相同的模型对象。

我想做的是使用 ng-bind 在初始页面加载时发送初始模型值和页面内容(以避免检索值时出现任何延迟)。我想知道 ng-bind 上的 html 元素值是否会更新此示例中的 logInRegistrationUi 对象，而是元素内容被初始化值覆盖('示例初始值') 在 logInRegistrationUi 对象上。

    var app = angular.module('fr', []);

    app.factory('logInRegistrationUiService', function() {


        var logInRegistrationUi = {

            logInRegistrationVisible: false,
            userLoggedIn: false,
            userEmailAddress: 'example initial value'
        };

        var logInRegistrationUiService = {

            logInRegistrationUi: logInRegistrationUi
        };

        return logInRegistrationUiService;
    });

    app.controller('logInRegistrationFormController', function ($scope, logInRegistrationUiService) {

        $scope.logInRegistrationUi = logInRegistrationUiService.logInRegistrationUi;

        console.log('logInRegistrationVisible (logInRegistrationFormController): ' + $scope.logInRegistrationUi.logInRegistrationVisible)
    });

    app.controller('logInRegistrationStatusController', function ($scope, logInRegistrationUiService) {

        $scope.logInRegistrationUi = logInRegistrationUiService.logInRegistrationUi;

        console.log('logInRegistrationVisible (logInRegistrationStatusController): ' + $scope.logInRegistrationUi.logInRegistrationVisible)
    });

页面加载时的 HTML 源 - ng-bind 跨度具有文字内容，试图让元素值更新服务模型。

<div ng-controller="logInRegistrationStatusController">
    ....            
    <span ng-bind="logInRegistrationUi.userEmailAddress">test@example.com</span>
    ....            

</div>

<div ng-controller="logInRegistrationFormController">
    ....            
    <span ng-bind="logInRegistrationUi.userEmailAddress">test@example.com</span>
    ....            

</div>

但是，服务模型对象没有更新 userEmailAddress 属性，而是根据初始服务值呈现文本“示例初始值”。

如何从 ng-bind 元素内容更新服务属性 logInRegistrationUi.userEmailAddress，而不是反之亦然？

更新 - 根据 runTarm 的答案使用 ng-init 产生了我正在寻找的行为，其形式可以在初始加载时与页面内容一起发送

<div ng-controller="logInRegistrationStatusController">
    ....            
    <span ng-bind="logInRegistrationUi.userEmailAddress"  ng-init="logInRegistrationUi.userEmailAddress = 'test@example.com'"></span>
    ....            

</div>

<div ng-controller="logInRegistrationFormController">
    ....            
    <span ng-bind="logInRegistrationUi.userEmailAddress">test@example.com</span>
    ....            

</div>

但是，服务模型对象没有更新 userEmailAddress 属性，而是根据初始服务值呈现文本“示例初始值”。

如何从 ng-bind 元素内容更新服务属性 logInRegistrationUi.userEmailAddress，而不是反之亦然？

Answer 1

我仍然无法想象为什么你会想要做与ng-bind相反的事情，但这里有两种从 View 设置模型值的方法。

1. 您可以编写如下自定义指令:

   app.directive('reverseBind', function ($parse) {
     return {
       restrict: 'A',
       link: function (scope, element, attrs) {
         var setFn = $parse(attrs.reverseBind).assign;
         setFn(scope, element.text())
       }
     }
   })
   

   在 html 中:

   <span reverse-bind="logInRegistrationUi.userEmailAddress">test@example.com</span>
   

2. 或者只使用ng-init:

   <span ng-init="logInRegistrationUi.userEmailAddress = 'test@example.com'">test@example.com</span>