在指令上設置多個模型？

我正在玩angularjs，想製作一個雙列表框 - 左邊的列表就是一切，右邊的列表包含從一個列表到另一個列表中的項目「推送」。箭頭來回推動物品。在指令上設置多個模型？

我可以在直接的HTML和使用angularjs做到這一點很容易，但我一直在尋找進入我怎麼能使其可重複使用，這樣的事情： <dual-list-box all-items='currentController.allItems' selected-items='currentController.selectedItems' />

我在哪裏可以排序的傳中，兩個列表..所以不管控制器或列表名稱，我可以使用我的雙列表框控件。

這可能嗎？怎麼樣？我在想這個指令可能會起作用，但我不知道該怎麼做。

而且我不知道我在想這很正確的方式....

來源

2013-10-03 Nicros

指令當然應該在這裏工作。例如：

module.directive('dualListBox', function() { 
    return { 
     restrict: 'E', 
     scope: { // set up isolated scope, bind to parent scope's properties (declared in view) 
      allItems: '=', 
      selectedItems: '=' 
     }, 
     template: 'HTML template, can bind to allItems and selectedItems in isolated scope', 
     link: (scope, elm, attr) { 
      // use to scope.allItems & scope.selectedItems here 
     } 
    } 
});

這就是主意。您可能想在實施過程中參考documentation for directive。

來源

2013-10-03 16:23:58

啊真棒！我認爲我沒有完全理解範圍方面...... – Nicros

該語法創建了一個名爲「隔離範圍」的東西，它包含與視圖中聲明的父範圍的屬性綁定的屬性，允許您將HTML完全聲明爲你在問題中提出要求。它的語法起初有點複雜（我知道那個等號），你應該讀一下我發送的鏈接。 –

會不會，謝謝！ – Nicros

這裏是一個工作示例，它保留了在指令範圍內的兩個移動方法。但是，不要使用箭頭（不確定你的意思，即只移動底部元素，或每個箭頭或什麼），只需單擊一個元素即可將其移過來。

myApp.directive('duallist', function() { 
return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     data1: '=', 
     data2: '='   
    }, 
    template: '<div><ul class="list"><li ng-repeat="datum in data1" ng-click="move(datum, data1)">{{datum}}</li></ul> <ul class="list"><li ng-repeat="datum in data2" ng-click="move(datum, data2)">{{datum}}</li></ul></div>', 
    link: function(scope, ele, attrs) { 
     scope.move = function(datum, dataset) { 
      if (dataset == scope.data1) { 
      scope.data2.push(datum); 
      dataset.splice(dataset.indexOf(datum), 1);     
      } 
      else{ 
      scope.data1.push(datum); 
      dataset.splice(dataset.indexOf(datum), 1);  
      }  
     } 
    } 
}

}）;

工作小提琴：http://jsfiddle.net/joshdmiller/HB7LU/

來源

2013-10-03 17:09:53

你的小提琴鏈接不工作:( – Nicros

臭蟲，我忘了保存它！如果你還需要它，我會在一個小時內給你一個工作版本 –

http://jsfiddle.net/HB7LU/563/ 你走了！ –

在指令上設置多個模型？

回答

相關問題