Question

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

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

在控制器中我想绑定文本字段的值并连接字符串变量，如下所示：

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

结果为hello undefined world 但如果我做console.log($scope.item.bgcolor);我在控制台中获取文本字段值。控制器代码：

.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>

app.js：

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

Answer 1

首先，你应该使用ng-style而不是这样的风格：

ng-style="background-color: item.bgcolor"

另外，发布您的完整视图和控制器代码。如果您的颜色选择器输入位于ng-repeat，则不能像控制器中的$scope.item.bgcolor一样使用它。

修改

控制器中没有$scope.bgcolor。你必须先这样定义它：

$scope.bgcolor = 'green'

后跟您的item对象：

$scope.item = { bgcolor: $scope.bgcolor }

Answer 2

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

会在项目对象的每次更改时触发监视集合

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

您的控制器

.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

AngularJS：如何在控制器中将字符串与$ scope值连接起来

2 个答案: