如何更改Angular Directive中的選擇功能？

http://plnkr.co/edit/pJRzKn2v1s865w5WZBkR?p=preview 如何更改Angular Directive中的選擇功能？

我有一個大的選擇下拉窗體在2個地方重複。唯一改變的是第一個選擇標籤，它具有不同的功能。

<!-- 
    On simple, change ng-change function to functionOne 
    On advanced, change ng-change function to functionTwo 
--> 

<select name="name1" ng-change="functionOne('function1')" id="the-id-1"> 
<select name="name2" ng-change="functionTwo('function2)" id="the-id-2"> 
    <option value="aaa">aaa</option> 
    <option value="bbb">bbb</option> 
    <option value="ccc">ccc</option> 
</select>

我嘗試使用ng-hide ng-show但是必須有一個不同的方式來實現這一目標。

var app = angular.module('myApp', []) 

.directive('termsForm', function() { 
    return { 
     templateUrl : "termsForm.html", 
     restrict : "E", 
     scope  : false, 
     controller : 'TermsFormController' 
    } 
}) 

.directive('selectOptions', function() { 
    return { 
     templateUrl : "form.html", 
     restrict : "E", 
     scope  : false 
    } 
}) 

.controller('TermsFormController', 
['$scope', 
function($scope) { 
    var vs = $scope; 
    vs.hello = "This is the form."; 
    vs.showingSimple = true; 
    vs.showingAdvanced = false; 

    vs.showForm = function(type) { 
     if (type === 'simple') { 
     vs.showingSimple = true; 
     vs.showingAdvanced = false; 
     } else if (type === 'advanced') { 
     vs.showingSimple = false; 
     vs.showingAdvanced = true; 
     } 
    } 

    vs.functionOne = function(msg) { 
     alert(msg); 
    } 

    vs.functionTwo = function(msg) { 
     alert(msg); 
    } 
}]);

termsForm.html

<ul class="nav nav-tabs"> 
    <button class="btn btn-info" ng-click="showForm('simple')">Simple</button> 
    <button class="btn btn-info" ng-click="showForm('advanced')">Advanced</button> 
</ul> 

<p>The select:</p> 

<div ng-show="showingSimple" class="simple-form"> 
    <p>Simple</p> 
    <select-options></select-options> 
</div> 

<div ng-show="showingAdvanced" class="advanced-form"> 
    <p>Advanced</p> 
    <select-options></select-options> 
</div>

來源

2015-03-30 Leon Gaban

你已經有了一個爲你的選擇創建的指令，它可以讓你在一半的路上。現在你只需要通過被稱爲隔離範圍的功能。

.directive('selectOptions', function() { 
    return { 
     templateUrl : "form.html", 
     restrict : "E", 
     scope  : { 
      changeFunc: '&' 
     } 
    } 
})

這使您可以在函數傳遞你想在ng-change事件致電：

<select-options changeFunc="function1"></select-options> 
<select-options changeFunc="function2"></select-options>

，然後在form.html你只需把

<select name="name2" ng-change="changeFunc()" id="the-id-2">

這樣你基本上是通過作爲參數的功能。閱讀this博客，瞭解有關隔離範圍的重要指南。

來源

2015-03-30 19:53:24

謝謝！我想這也可以用來改變一個ng模型？ – 2015-03-30 20:07:23

是的，但是你必須使用正確的綁定類型（@）。閱讀該博客獲取更多信息。 – 2015-03-30 20:09:32

我只想重構您的標記和控制，以適應基於簡單/高級上下文。

在你的控制，你會暴露在改變功能的「通用」的下拉列表中，第一...

(function() { 
    'use strict'; 

    angular.module('app').controller('someCtrl', [someCtrl]); 

    function someCtrl() { 
     var vm = this; 
     vm.isSimple = true; 
     vm.nameChange = function() { 
      if(vm.isSimple) 
       functionOne('function1'); 
      else 
       functionTwo('function2'); 
     } 

     // Other things go here. 
    } 
})();

......然後，在你看來，你的選擇會改變這種* ：

<select id="someId" name="someName" ng-change="vm.nameChange()" />

*：假設您使用的是controllerAs語法，即。如果你不是，不要在select上預先設置vm.。

來源

2015-03-30 19:51:44

如何更改Angular Directive中的選擇功能？

回答

相關問題