如何更改选择功能的角度指令？ [英] How to change select functions in Angular Directive?

问题描述

http://plnkr.co/edit/pJRzKn2v1s865w5WZBkR?p=$p$ PVIEW

我这是在2个地方重复了大量选择下拉列表的形式。唯一的变化就是第一选择标记，具有不同的功能。

 ＆LT;！ - 
  简单，变化NG-改变功能functionOne
  在先进的，变化的NG-改变功能functionTwo
 - ＆GT;＆LT;选择名称=名称1NG变化=functionOne（'功能1'）ID =的-ID-1＆GT;
＆LT;选择名称=NAME2NG变化=functionTwo（'函数2）ID =的-ID-2＆GT;
  ＆LT;期权价值=AAA＆GT; AAA-LT; /选项＆GT;
  ＆LT;期权价值=BBB＆GT; BBB＆LT; /选项＆GT;
  ＆LT;期权价值=CCC＆GT; CCC＆LT; /选项＆GT;
＆LT; /选择＆GT;
 

我试着用 NG-隐藏NG-节目但是必须有一个不同的方式来做到这一点。

  VAR应用= angular.module（'对myApp'，[]）.directive（'termsForm'，函数（）{
    返回{
        templateUrl：termsForm.html
        限制：E，
        适用范围：假的，
        控制器：'TermsFormController
    }
}）.directive（'selectOptions'，函数（）{
    返回{
        templateUrl：form.html
        限制：E，
        适用范围：假的
    }
}）.controller（'TermsFormController'，
['$范围'，
功能（$范围）{
    VAR VS = $范围;
    vs.hello =这是形式。
    vs.showingSimple = TRUE;
    vs.showingAdvanced = FALSE;    vs.showForm =函数（类型）{
      如果（类型==='简单'）{
        vs.showingSimple = TRUE;
        vs.showingAdvanced = FALSE;
      }否则如果（类型==='先进'）{
        vs.showingSimple = FALSE;
        vs.showingAdvanced = TRUE;
      }
    }    vs.functionOne =函数（MSG）{
      警报（MSG）;
    }    vs.functionTwo =函数（MSG）{
      警报（MSG）;
    }
}]）;
 

termsForm.html

 ＆LT; UL类=净值资产净值的选项卡＆GT;
  ＆LT;按钮类=BTN BTN-INFONG点击=showForm（'简单'）＆GT;简单＆LT; /按钮＆GT;
  ＆LT;按钮类=BTN BTN-INFONG点击=showForm（'先进'）＆gt;高级＆LT; /按钮＆GT;
＆LT; / UL＆GT;＆LT; P＆gt;在选择：其中; / P＆GT;＆LT; D​​IV NG秀=showingSimple级=简单形式＆GT;
  ＆所述p为H.;简单和下; / P＆GT;
  ＆LT;请选择 - 选项＆gt;＆LT; /选择，选项＆gt;
＆LT; / DIV＆GT;＆LT; D​​IV NG秀=showingAdvanced级=高级形式＆GT;
  ＆LT; P＆gt;高级＆LT; / P＆GT;
  ＆LT;请选择 - 选项＆gt;＆LT; /选择，选项＆gt;
＆LT; / DIV＆GT;
 

解决方案

您已经为您的选择创造了一个指令，这让你走了一半。现在你只需要通过什么作为隔离范围众所周知传递功能研究。

  .directive（'selectOptions'，函数（）{
    返回{
        templateUrl：form.html
        限制：E，
        范围       ： {
          changeFunc：'和;'
        }
    }
}）
 

这让你在你想要的 NG-变化事件调用该函数传递：

 ＆LT;选择选项changeFunc =功能1＆GT;＆LT; /选择，选项＆gt;
＆LT;选择选项changeFunc =函数2＆GT;＆LT; /选择，选项＆gt;
 

然后在你的form.html你只需把

 ＆LT;选择名称=NAME2NG变化=changeFunc（）ID =的-ID-2＆GT;
 

这样，你基本上传递功能可按作为一个参数。阅读这博客为一个伟大指南孤立作用域。

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

I have a large select dropdown form which is repeated in 2 places. The only thing that changes is the first select tag, which has a different function.

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

I tried using ng-hide ng-show however there must be a different way to accomplish this.

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>

解决方案

You already have a directive created for your select, that gets you half way there. Now you just need to pass the function in through whats known as the isolated scope.

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

This allows you to pass in the function you want to call on the ng-change event:

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

And then in your form.html you simply put

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

This way you are basically passing the funciton in as a parameter. Read this blog for a great guide on isolated scopes.

这篇关于如何更改选择功能的角度指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！