gpt4 book ai didi

javascript - 添加新联系人的指令

转载 作者:行者123 更新时间:2023-12-03 06:59:41 24 4
gpt4 key购买 nike

这是我的自定义指令,

var directiveProvider = angular.module('AppDirective',[]);

directiveProvider.directive('addNewContact', function() {

var custom_template = '<div id="" class="Edit-box"><h4>Contact</h4><div class="form-group">' +
'<label class="col-sm-2 control-label" for="inputEmail3">First Name </label><div class="col-sm-4">' +
'<input type="text" placeholder="Enter ..." class="form-control"></div>' +
'<label class="col-sm-2 control-label" for="inputEmail3">Last Name</label><div class="col-sm-4">'+
'<input type="text" placeholder="Enter ..." class="form-control"></div></div>' +
'<div class="form-group"><label class="col-sm-2 control-label" for="inputEmail3">Email</label>' +
'<div class="col-sm-4">' +
'<input type="email" placeholder="Enter email" id="exampleInputEmail1" class="form-control"></div>' +
'<label class="col-sm-2 control-label" for="inputEmail3">Telephone</label><div class="col-sm-4">' +
'<input type="text" placeholder="Enter ..." class="form-control"></div></div></div>';

return {

restrict: 'AE',
replace: true,
template: custom_template,
scope: {
firstName: '='
},
link: function ($scope, elem, attr, ctrl) {
console.debug($scope);
}
};
});

在 html 中我有

<div id="addContact" add-new-contact ></div>
<div ng-click="addNewContactHTML()">
<a>Add New Contact</a>
</div>

在我的 Controller 中我有

$scope.addNewContactHTML = function(){
var compiledeHTML = $compile("<div add-New-Contact ></div>")($scope);
$("#addContact").append(compiledeHTML);
};

这样,在单击按钮 I 时,就会添加一个新的空模板并可以输入详细信息。我不确定如何创建指令以及如何访问 Controller 中的模型以便我可以保存 Controller 中的数据。

最佳答案

您可以通过使用数组来做到这一点,这里是 Angular 部分

 var app = angular.module('AppDirective',[]);

app.directive('addNewContact', function() {



return {
scope:{
obj:'='
},
templateUrl: 'tempbody.html',
link: function (scope, elem, attr, ctrl) {




}
};
});

app.controller('myController',['$scope','$compile',function($scope,$compile){


$scope.details=[{fname:'',lname:'',mail:'',telephone:''}];

$scope.addNewContactHTML = function(){
$scope.details.push({fname:'',lname:'',mail:'',telephone:''});
}



}]);

此处为 HTML

    <!DOCTYPE html>
<html lang="en">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="cc.js"></script>

</head>

<body ng-app="AppDirective">
<div ng-controller="myController">
<div id="addContact">
<div add-new-contact="detail" ng-repeat="detail in details"></div>
</div>

<div ng-click="addNewContactHTML()">
<a>Add New Contact</a>
</div>
</div>

<script type="text/ng-template" id="tempbody.html">
<div class="Edit-box">
<h4>Contact</h4>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Fname</label>
<div class="col-sm-4">
<input type="text" placeholder="Enter ..." class="form-control" ng-modal="obj.fname">
</div>
<label class="col-sm-2 control-label" for="inputEmail3">Lname</label>
<div class="col-sm-4">
<input type="text" placeholder="Enter ..." class="form-control" ng-modal="obj.lname">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3" ng-modal="obj.mail">Email</label>
<div class="col-sm-4">
<input type="email" placeholder="Enter email" id="exampleInputEmail1" class="form-control">
</div>
<label class="col-sm-2 control-label" for="inputEmail3" ng-modal="obj.telephone">Telephone</label>
<div class="col-sm-4">
<input type="text" placeholder="Enter ..." class="form-control">
</div>
</div>

</div>
</script>
</body>

</html>

关于javascript - 添加新联系人的指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37111777/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com