Директива для добавления нового контакта

Это мой заказ директива,Директива для добавления нового контакта

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>

и в мой контроллер у меня есть

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

так, что на кнопке нажмите I, добавлен новый пустой шаблон и могут быть введены данные. Я не уверен, как создать директиву и как я могу получить доступ к модели в контроллере, чтобы я мог сохранять данные с контроллера.

источник

2016-05-09 Jayaraj PS

Пожалуйста, наставит меня, если мой подход является неправильным. –

Я думаю, что это, вы должны узнать больше, вот пример https://plnkr.co/edit/Gi2GFqQmXINqOhiCcGmI?p=preview –

@Chathura, спасибо за быстрый ответ, я думаю, что вы поняли меня неправильно, с ссылкой на ваш Например, когда я нажимаю «Добавить новый контакт», имя файла fname, lname и другие поля должны быть реплицированы, чтобы пользователь мог ввести другое имя. –

Вы можете сделать это, использовать массив, Здесь угловая часть

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>

источник

2016-05-09 12:05:31

Директива для добавления нового контакта

ответ

Смежные вопросы