Question

我对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>是我定义的自定义指令。当我传递＆＃39;信息＆＃39;属性为＆＃39; modal＆＃39; （.i.e＆＃39; info =＆＃34; modal＆＃34;＆＃39;）它工作正常并转换为以下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>

这基本上是一个用于关闭模态的bootstrap处理按钮。

这就是我被困的地方：现在，如果attr为＆＃39; info =＆＃34，我将如何将ng-click传递给此自定义指令;模态＆＃34;＆＃39; （.i.e＆＃39; info =＆＃34; somethingelse＆＃34;）因为我希望能够在整个网站上使用它，并可能在不同的实例中取消或关闭不同的元素。

Answer 1

看起来答案很简单。

我可以在我的自定义指令中使用ng-click指令作为属性 -

<remove-btn info="input" ng-click="customer.cancel()"></remove-btn>

Angularjs将ng-click传递给指令

1 个答案: