Richtlinie für Neuen Kontakt

Dies ist meine benutzerdefinierte Richtlinie,Richtlinie für Neuen Kontakt

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); 
    } 
}; 
});

und in html Ich habe

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

und in meinem Controller Ich habe

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

, die so auf der Schaltfläche Klicken Sie auf Ich, eine neue leere Vorlage wird hinzugefügt und Details können eingegeben werden. Ich bin nicht sicher, wie man die Direktive erstellt und wie ich auf das Modell im Controller zugreifen kann, damit ich die Daten vom Controller speichern kann.

Quelle

2016-05-09 Jayaraj PS

Bitte führen Sie mich, wenn mein Ansatz falsch ist. –

Ich denke das, Sie sollten über mehr lernen, hier das Beispiel https://plnkr.co/edit/Gi2GFqQmXINqOhiCcGmI?p=preview –

@Chathura, danke für die schnelle Antwort, ich denke, Sie haben mich falsch, mit Verweis auf Ihre Wenn ich zum Beispiel auf Neuen Kontakt hinzufügen klicke, sollten die Felder fname, lname und andere Felder repliziert werden, damit der Benutzer einen anderen Namen eingeben kann. –

Sie können das tun, indem Sie einen Array verwenden, hier der Winkel Teil

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:''}); 
    } 



}]);

Hier 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>

Quelle

2016-05-09 12:05:31

Richtlinie für Neuen Kontakt

Antwort

Verwandte Themen