Angular UI Bootstrap和Angular Color Picker返回unde-ng模型

在我的應用程序中，我需要一個帶alpha透明度的顏色選擇器，搜索後終於找到angular-bootstrap-colorpicker，所以我嘗試使用this.when，通常我使用這個插件它的工作和ng-model正確，但是當我在angular-ui bootstrap中使用此指令時，插件無法正常工作並返回undefined。對於這個問題我創建了一個jsbin帶有標籤模式和正常的身體。我有像modalAngular UI Bootstrap和Angular Color Picker返回unde-ng模型

來源

2014-07-16 MBehtemam

我知道這是前一個問題..但爲了其他人看到此頁面的好處。

當一個角度綁定（如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škoHevery通常說，如果你的ng模型沒有點。你可能做錯了。

Drammys答案也可以工作（因爲他本質上是結合了「虛擬機」的對象，但是這是一個不同風格的控制器，以「控制器」語法一起是可選）

來源

2014-08-26 14:47:23

我把它定義控制器的虛擬機，並在控制器中填充VM對象的工作角度的UI引導的其他指令同樣的問題...

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

來源

2014-07-16 07:56:30 Drammy

Angular UI Bootstrap和Angular Color Picker返回unde-ng模型

回答

相關問題