AngularJS:如何在 Controller 中将字符串与 $scope 值连接起来

Question

我想做的事情听起来很简单，但是我得到的结果对我来说很尴尬。
有一个带有文本文件的 View :

<input colorpicker="hex" type="text" ng-model="item.bgcolor" style="background:{{item.bgcolor}}"/> 

在 Controller 中，我想绑定(bind)文本字段的值并与字符串变量连接，如下所示:

var page = 'hello' + $scope.item.bgcolor + 'world';

结果是 hello undefined world但如果我这样做了 console.log($scope.item.bgcolor);我在控制台中获取文本字段值。
Controller 代码:

.controller('mainCtrl', function($scope) {
 $scope.item = {
    bgcolor: $scope.bgcolor,
  };

  var page = 'hello' + $scope.item.bgcolor + 'world';
  $scope.show = function() {
    console.log('page', page);
    console.log('bgcolor', $scope.item.bgcolor);
  };
}) 

主视图代码:

<div id="collapseOne" class="panel-collapse collapse">
    <div class="panel-body">
        <label>Background color</label>
        <input colorpicker="hex" type="text" ng-model="item.bgcolor" style="background:{{item.bgcolor}}"/>
        <label>Header color</label>
        <input colorpicker="hex" type="text" ng-model="item.headercolor" style="background:{{item.headercolor}}"/>
    </div>
</div>

应用程序.js:

 .state('app.main', {
      url: '/main',
      views: {
        'menuContent': {
          templateUrl: 'views/main.html',
          controller: 'mainCtrl'
        }
      }
    })

Answer 1

这样做..你不需要做额外的努力，只需使用watch方法并在对象更改时更改页面值..

每次更改项目对象时都会触发 watch 集合

$scope.$watchCollection(function(){ return $scope.item ;},function(n,o){
    page = 'hello' + $scope.item.bgcolor + 'world';
});

您的 Controller

.controller('mainCtrl', function($scope) {
 $scope.item = {
    bgcolor: null,
  };

   var page = 'hello' + $scope.item.bgcolor + 'world';

  $scope.$watchCollection(function(){ return $scope.item ;},function(n,o){
       page = 'hello' + $scope.item.bgcolor + 'world';
   });

  var page = 'hello' + $scope.item.bgcolor + 'world';
  $scope.show = function() {
    console.log('page', page);
    console.log('bgcolor', $scope.item.bgcolor);
  };
}) 

Here is the working plunker