Question

这是我的自定义指令

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

并在html中我有

{{1}}

在我的控制器中我有

{{1}}

以便在按钮上单击I，添加一个新的空模板并输入详细信息。我不确定，如何创建指令以及如何在控制器中访问模型以便我可以从控制器保存数据。

Answer 1

你可以通过使用数组来做到这一点，这里的角度部分

 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>

添加新联系人的指令

1 个答案: