如何更改 Angular 指令中的选择功能？答案

【问题标题】：How to change select functions in Angular Directive?如何更改 Angular 指令中的选择功能？
【发布时间】：2015-03-31 03:53:24
【问题描述】：

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

我有一个大的选择下拉表单，它在 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>

【问题讨论】：

标签： angularjs angularjs-directive angularjs-ng-change

【解决方案1】：

您已经为您的选择创建了一个指令，它可以帮助您完成一半。现在您只需要通过所谓的isolated scope 传递函数。

.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 博客，了解有关隔离作用域的出色指南。

【讨论】：

谢谢！我想这也可以用来改变 ng-model？
可以，但您必须使用正确的绑定类型 (@)。阅读该博客了解更多信息。

【解决方案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 语法，也就是说。如果不是，请不要在 select 前面添加 vm.。

【讨论】：