本文介绍了如何更改角度指令中的选择功能?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
http://plnkr.co/edit/pJRzKn2v1s865w5WZBkR?p=preview
我有一个很大的选择下拉表单，它在 2 个地方重复.唯一改变的是第一个选择标签，它具有不同的功能.
我尝试使用 ng-hide ng-show 但是必须有不同的方法来实现这一点.
var app = angular.module('myApp', []).directive('termsForm', function() {返回 {templateUrl : "termsForm.html",限制:E"，范围:假，控制器:'TermsFormController'}}).directive('selectOptions', function() {返回 {templateUrl : "form.html",限制:E"，范围:假}}).controller('TermsFormController',['$范围',功能($范围){var vs = $scope;vs.hello = "这是表格.";vs.showingSimple = true;vs.showingAdvanced = false;vs.showForm = 函数(类型){如果(类型 === '简单'){vs.showingSimple = true;vs.showingAdvanced = false;} else if (type === '高级') {vs.showingSimple = false;vs.showingAdvanced = true;}}vs.functionOne = 函数(味精){警报(味精)；}vs.functionTwo = 功能(味精){警报(味精)；}}]);
termsForm.html
<button class="btn btn-info" ng-click="showForm('simple')">简单</button><button class="btn btn-info" ng-click="showForm('advanced')">Advanced</button>
<p>选择:</p><div ng-show="showingSimple" class="simple-form"><p>简单</p><选择选项></选择选项>
<div ng-show="showingAdvanced" class="advanced-form"><p>高级</p><选择选项></选择选项>
解决方案
您已经为您的选择创建了一个指令，这让您成功了一半.现在您只需要通过所谓的隔离作用域来传递函数.
.directive('selectOptions', function() {返回 {templateUrl : "form.html",限制:E"，范围 : {changeFunc: '&'}}})
这允许你在 ng-change 事件中传入你想要调用的函数:
<select-options changeFunc="function2"></select-options>
然后在你的 form.html 中简单地输入
通过这种方式，您基本上是将函数作为参数传入.阅读这个博客，以获得很好的指南在孤立的范围内.
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.
这篇关于如何更改角度指令中的选择功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
