Question

在我的应用程序中，我需要一个具有alpha透明度的颜色选择器，并在搜索后最终找到angular-bootstrap-colorpicker所以我尝试使用它。当我正常使用此插件时它正常工作并且ng-model正确但当我使用时这个指令在angular-ui bootstrap中，插件不起作用并返回undefined。对于这个问题，我创建一个jsbin与标签模式和正常生化。我对像modal

这样的angular-ui bootstrap的其他指令也有同样的问题

Answer 1

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

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

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

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

作为一项规则，MiškoHevery说如果你的ng模型没有点'。'你可能做错了。

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

Answer 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对象的属性。它感觉更整洁，更适合我。

更新了jsbin here。

Angular UI Bootstrap和Angular Color Picker为ng-model返回undefined

2 个答案: