Как изменить функции выбора в Угловой Директиве?

Question

http://plnkr.co/edit/pJRzKn2v1s865w5WZBkR?p=preview

У меня есть большой выбор раскрывающегося списка, который повторяется в 2-х местах. Единственное, что меняется, это первый тег select, который имеет другую функцию.

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

Answer 1

У вас уже есть директива, созданная для вашего выбора, которая вас доставит на полпути. Теперь вам просто нужно передать функцию через то, что известно как выделенная область .

.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"> 

Этот путь вы в основном передаете funciton в качестве параметра. Прочитайте this блог для отличного руководства по изолированным областям.

Answer 2

Я просто реорганизовать разметку и контроллер к адаптации на основе простого/продвинутого контекста.

В контроллере, вы бы выставить «родовое» на функцию изменения для выпадающего списка, первый ...

(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 синтаксис, то есть. Если вы этого не сделаете, не добавляйте vm. на select.