[英]Angularjs passing ng-click to directive
我对angularjs还是相当陌生,我似乎陷入了代码混乱之中,似乎无法弄清这一点。
这是代码(angularjs)
var siteOptimizeApp = angular.module('siteOptimizeApp', []);
// ---- Controllers ----
siteOptimizeApp.controller('Formctrl',['$scope', '$http', function($scope, $http){
$scope.customer = customer;
$scope.placeholderWrp = '';
$scope.inputWrp = 'hidden';
$scope.modal = 'modal';
$scope.customer.cancelfunc = 'customer.cancel()';
$scope.customer.edit = function(){
$scope.this.placeholderWrp = 'hidden';
$scope.this.inputWrp = '';
}
$scope.customer.cancel = function(){
$scope.this.placeholderWrp = '';
$scope.this.inputWrp = 'hidden';
}
$scope.customer.modal = function(){
}
$scope.formSubmit = function(){
}
}]);
// ---- Directives (element) ---
// remove-btn
siteOptimizeApp.directive('removeBtn', function(){
return {
restrict: 'E',
//replace: true,
scope: {
customerInfo: '=info'
},
template: '<button type="button" class="close" data-dismiss="{{customerInfo}}" ><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>'
}
});
客户在哪里-
customer = {"birthday":"0000-00-00","customersettings":null,"email":"j_email@gmail.com","fullname":"j_email","gender":"m","cid":"cust_D5C502813C62017","location":"localhost","logintype":"email","timeszone":null}
这是html:
<form name="profileFrm" action="" novalidate="" ng-controller="Formctrl" ng-submit="formSubmit()">
<div class="modal-header">
<remove-btn info="modal"></remove-btn>
<h4 class="modal-title">Edit Profile</h4>
</div>
<div class="modal-body">
<p class="row">
<label for="fullname" class="col-md-3 col-lg-3 col-sm-12 control-label">Full Name:</label>
<span class="col-md-6 col-lg-6 col-sm-12 form-control-static {{placeholderWrp}}">
{{customer.fullname}}
<a class="edit" href="#" ng-click="customer.edit()" >Edit
<i class="glyphicon glyphicon-edit"></i>
</a>
</span>
<span class="col-md-6 col-lg-6 col-sm-12 form-control-static {{inputWrp}}">
<input ng-model="customer.fullname" class="" id="fullname" type="text" name="fullname" placeholder="Enter Your full name" value="{$fullname}"/>
<remove-btn info="customer.cancelfunc"></remove-btn>
</span>
</p>
</div>
</form>
如您所见, <remove-btn info=""></remove-btn>
是我定义的自定义指令。 当我将'info'属性作为'modal'(.ie'info =“ modal”')传递时,它可以正常工作并转换为以下html- <remove-btn info="modal" class="ng-isolate-scope"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> </remove-btn>
从根本上讲,这是用于关闭模式的引导程序处理的按钮。
这是我遇到的问题:现在,在attr为'info =“ modal”'(.ie'info =“ somethingelse”)以外的其他情况下,如何将ng-click传递给此自定义指令,我想能够在整个网站上使用它,并可能在不同的情况下取消或关闭不同的元素。
看起来答案很简单。
我可以将ng-click指令用作我的自定义指令的属性-
<remove-btn info="input" ng-click="customer.cancel()"></remove-btn>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.