Angular UI Bootstrap 和 Angular 颜色选择器为 ng-model 返回 undefined答案

【问题标题】：Angular UI Bootstrap and Angular Color Picker return undefined for ng-modelAngular UI Bootstrap 和 Angular 颜色选择器为 ng-model 返回 undefined
【发布时间】：2014-07-16 05:46:54
【问题描述】：

在我的应用程序中，我需要一个具有 alpha 透明度的颜色选择器，在搜索后最终找到 angular-bootstrap-colorpicker 所以我尝试使用这个。通常我使用这个插件时它可以正常工作并且 ng-model 正确但是当我在 angular 中使用这个指令时-ui bootstrap ，插件不起作用并返回未定义。对于这个问题，我创建了一个jsbin，带有标签模式和正常的身体。我对 angular-ui bootstrap 的其他指令也有同样的问题，比如modal

【问题讨论】：

标签： angularjs twitter-bootstrap angular-ui angular-ui-bootstrap

【解决方案1】：

我知道这是不久前有人问过的……但为了其他人看到这个页面的好处。

当一个角度绑定（例如 ng-model）正在检索一个值时，它将沿着作用域层次结构向上移动，直到找到它为止。但是当设置一个值时，它不会沿着层次结构向上移动。这是因为它基于 javascript 原型继承的工作原理。

如果您遵循此逻辑，那么如果您绑定到对象的属性，则绑定将需要向上移动层次结构以获取该对象，然后在其上设置一个值。因此，根据更新后的 jsbin 注释在父控制器上，我正在初始化范围上的对象。 $scope.colors = {}; 然后绑定到该对象的属性。

<input colorpicker="rgba" type="text" ng-model="colors.back1Color" />
<input colorpicker="rgba" type="text" ng-model="colors.backColor" />

作为一项规则，Miško Hevery 会说如果您的 ng-model 没有点 '.'你可能做错了。

Drammys 的答案也可能有效（因为他本质上是绑定到 'vm' 对象，但这是控制器的不同风格，以及 'Controller As' 语法并且是可选的）

【讨论】：

【解决方案2】：

我通过将控制器定义为 vm 并在控制器中填充 vm 对象来使其工作...

<body ng-controller="mainCtrl as vm">Normal
  <input colorpicker="rgba" type="text" ng-model="vm.back1Color" /><hr/>
  <tabset><tab heading="In Tab">
    <input colorpicker="rgba" type="text" ng-model="vm.backColor" />
  </tab></tabset>

var app = angular.module('app',['colorpicker.module','ui.bootstrap']);
app.controller('mainCtrl',function($scope){
  var vm = this;
  vm.backColor = '';
  vm.back1Color = '';

  $scope.change = function(){
    alert(vm.backColor);
  };
  $scope.change1 = function(){
     alert(vm.back1Color);
  };
});

我个人更喜欢在控制器中的这个“vm”对象上定义我希望向视图公开的所有控制器属性，然后在视图中将控制器声明为 vm 并绑定到 vm 对象的属性。我觉得它更整洁，定义更好。

更新了jsbinhere。

【讨论】：