twitter-bootstrap Angular UI Bootstrap 和 Angular Color Picker 为 ng-model 返回 undefined
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24773060/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular UI Bootstrap and Angular Color Picker return undefined for ng-model
提问by MBehtemam
In my application i need a color picker with alpha transparency and after searching finally find angular-bootstrap-colorpickerso i try to use this.when normally i use this plugin it work and ng-modelcorrectly but when i use this directive in angular-ui bootstrap , the plugin doesn't work and return undefined.
for this problem i create a jsbinwith tabed mode and normal bod .
i have same problem with other directives of angular-ui bootstrap like modal
在我的应用程序中，我需要一个具有 alpha 透明度的颜色选择器，在搜索后终于找到了angular-bootstrap-colorpicker所以我尝试使用它。通常我使用这个插件时它可以ng-model正常工作但是当我在 angular-ui bootstrap 中使用这个指令时，该插件不起作用并返回未定义。对于这个问题，我创建一个jsbin与tabed模式和正常生化需氧量。我对 angular-ui bootstrap 的其他指令有同样的问题，比如modal
回答by David Beech
I know this was asked a while ago.. but for the benefit of anyone else seeing this page.
我知道这是不久前被问到的……但为了其他看到此页面的人的利益。
When an angular binding (such as ng-model) is retrieving a value it will travel up the scope hierarchy until it finds it.. however when setting a value it wont travel up the hierarchy. This is because it is based on how javascript prototype inheritance works.
当角度绑定（例如 ng-model）正在检索一个值时，它将在作用域层次结构中向上移动，直到找到它为止。但是，当设置一个值时，它不会在层次结构中向上移动。这是因为它基于 javascript 原型继承的工作方式。
If you follow this logic then if you bound to a property of an object the binding would then need to travel up the hierarchy to fetch that object and then set a value on it.. therefore as per the updated jsbinnote that on the parent controller i am initialising an object on the scope. $scope.colors = {};and then binding to properties on that object.
如果您遵循此逻辑，那么如果您绑定到对象的属性，则绑定将需要沿层次结构向上移动以获取该对象，然后在其上设置一个值..因此，根据更新的jsbin请注意，在父控制器上我正在范围内初始化一个对象。$scope.colors = {};然后绑定到该对象上的属性。
<input colorpicker="rgba" type="text" ng-model="colors.back1Color" />
<input colorpicker="rgba" type="text" ng-model="colors.backColor" />
As a rule, Mi?ko Hevery said if your ng-model doesn't have a dot '.' you are probably doing it wrong.
通常，Mi?ko Hevery 说如果你的 ng-model 没有点 '.' 你可能做错了。
Drammys answer may also work (because he is essentially binding to the 'vm' object, but this is a different style for controllers, along with 'Controller As' syntax and is optional)
Drammys 的答案也可能有效（因为他本质上是绑定到 'vm' 对象，但这是控制器的不同风格，以及 'Controller As' 语法并且是可选的）
回答by Drammy
I got it working by defining the controller as vm and populating the vm object in the controller...
我通过将控制器定义为 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);
};
});
Personally I prefer to define all the controller properties I wish to expose to the view on this "vm" object in the controller and then declare the controller as vm in the view and bind to the vm object's properties. It feels neater and better defined to me.
就我个人而言，我更喜欢在控制器中的这个“vm”对象上定义我希望公开给视图的所有控制器属性，然后在视图中将控制器声明为 vm 并绑定到 vm 对象的属性。对我来说，它感觉更整洁、更明确。
Updated the jsbin here.
在这里更新了 jsbin 。
