Question

我很难知道如何将ng-model的值分享到不同的视图。例如，我有一个带侧边栏的应用程序。在侧边栏中，用户可以使用ng-Bootstrap colorPicker选择o颜色。因此，用户可以在配置文本时选择他们希望文本在页面上的颜色。

以下是我要解释的内容的快照： what I am trying to explain

side nav html的控制器是：

            <div class="form-group">
                <label for="headerBigColor" class="col-sm-6 control-label">Header</label>
                <div class="col-sm-6 pull-right input-group">
                    <input style="background: {{headerBigColor}}; color: {{headerBigColor}};" colorpicker  colorpicker-position="right" class="span2" type="text" id="headerBigColor" ng-model="headerBigColor" required="required" />
                    <small class="help-block" ng-show="headerBigColor">HEX Value:<br />{{headerBigColor}}</small>
                </div>
            </div>

视图的html我要分享ng-model＆＃34; headerBigColor＆＃34;是

            <div class="brand-program-txt">
                <h1 style="color: {{headerBigColor}} !important;">Organization</h1>
                <hr/>
                <div class="col-xs-12">
                    <span class="pull-left">Program Title</span><span class="pull-right">Program Track </span><span class="pull-right"> Deadline Date</span>
                </div>
            </div>

我怎样才能做到这一点？

Answer 1

这是一个应用程序设计问题。我解决这个问题的方法是在AngularJS中创建一个“环境状态服务”，用于存储视图之间共享的值。

该服务具有类似于以下内容的界面：

value getValue(key)
void setValue(key, value)

将此服务注入两个视图的控制器，并让侧栏控制器设置该值。确保“main”控制器在每个摘要周期中获取服务的值（在状态服务getValue函数上使用$ scope $ watch）。

Answer 2

分别为侧面导航和预览窗口引入控制器。

然后，两个控制器都可以与将存储颜色数据的共享服务进行交互。

Side Nav控制器：

.controller('SideNav', ['$scope', 'ColorService', function($scope, ColorService) {
  $scope.setSelectedColor = ColorService.setSelectedColor;
});

预览窗口控制器：

.controller('PreviewWindow', ['$scope', 'ColorService', function($scope, ColorService) {
  $scope.color = null;

  $scope.$watch(ColorService.getSelectedColor, function(color) {
    $scope.color = color;
  });
});

共享色彩服务：

.factory('ColorService', function() {
  var selectedColor = null;
  var service = {};

  service.setSelectedColor = function(color) {
    selectedColor = color;
  };

  service.getSelectedColor = function() {
    return selectedColor;
  };

  return service;
});

Answer 3

以下是我如何实现这一目标。

SIDEBAR控制器

configAppControllers.controller('BrandingCtrl', ["$scope", "$location", "httprequesthandle", "$stateParams", "handlelocalstorage", "$modal", "tickmark", "$rootScope",
function ($scope, $location, httprequesthandle, $stateParams, handlelocalstorage, $modal, tickmark, $rootScope) {
    $scope.headerImage = "images/brand_img.jpg";
    $scope.hasImage = true;
    // end Branding Color service
    $rootScope.$on('changedHeader', function (event, color) {
        if (color !== undefined) {
            $scope.backgroundcolor = color;
            $scope.hasImage = false;
        }
    });

    $rootScope.$on('changedHeadLine', function (event, color) {
        $scope.headlineColor = color;
    });


    $rootScope.$on('changedBackgroundImage', function (event, srccode) {
        $scope.headerImage = srccode;
        $scope.hasImage = true;
    });

}]);

MAINPAGE View Controller

configAppControllers.controller('BrandingSidebarCtrl', ['$scope', 'httprequesthandle', '$stateParams', '$rootScope', '$timeout',
function ($scope, httprequesthandle, $stateParams, $rootScope, $timeout) {
    var sideBar;

    $scope.$watch("headerBigColor", function (color) {
        $rootScope.$broadcast('changedHeader', $scope.headerBigColor);
    });

    $scope.$watch("headLineTxt", function (color) {
        $rootScope.$broadcast('changedHeadLine', $scope.headLineTxt);
    });

    $scope.$watch("headLineTxt2", function (color) {
        $rootScope.$broadcast('changedHeadLine', $scope.headLineTxt2);
    });

HTML on mainPage View

<div class="brand-img" style="background-color:{{backgroundcolor}} !important;">
        <img src="{{headerImage}}" ng-show="hasImage" alt="Branding" />
        <div class="brand-program-txt">
            <h1 style="color: {{headlineColor}} !important;">Organization</h1>
            <hr/>
            <div class="col-xs-12">
                <span class="pull-left">Program Title</span><span class="pull-right">Program Track </span><span class="pull-right"> Deadline Date</span>

            </div>
        </div>
    </div>

侧栏上的HTML

<div class="form-group">
                <label for="headerBigColor" class="col-sm-6 control-label">Header</label>
                <div class="col-sm-6 pull-right input-group">
                    <input style="background: {{headerBigColor}}; color: {{headerBigColor}};" colorpicker colorpicker-position="right" class="span2" type="text" id="headerBigColor" ng-model="headerBigColor" required="required" />
                    <small class="help-block" ng-show="headerBigColor">HEX Value:<br />{{headerBigColor}}</small>
                </div>
            </div>
            <div class="form-group">
                <label for="headLineTxt" class="col-sm-7 control-label">Headline Text</label>
                <div class="col-sm-5 pull-right">
                    <input style="background: {{headLineTxt}}; color: {{headLineTxt}};" colorpicker colorpicker-position="right" class="span2" type="text" id="headLineTxt" ng-model="headLineTxt" required="required" />
                    <small class="help-block" ng-show="headLineTxt">HEX Value: {{headLineTxt}}</small>

                </div>
            </div>

AngularJS如何将ng-model值分享到不同的视图

3 个答案: