Question

我正在使用ng-repeat显示元素，我想选择其中一个元素，然后在另一个div页面中显示所选元素或其他任何内容。

    <div ng-show="newsignature" id="newsignature">
    <div class="ng-cloak">
    <div ng-click="showcreateform()" ng-hide="createsignature" class="ncontact" ng-repeat="template in signaturetemplates">
    <h2>{{template.name}}</h2>
    <div class="tdescrip" data-ng-bind-html="template.templatesample"></div>
    <br>
    </div>
  </div>
  </div>

我想要保留的元素是名称和HTML，但我不知道该怎么做。

当我选择我显示带有输入字段的表单的元素时，在表单的顶部我有一个预览按钮，当我点击时的想法是显示所选模板的预览与给出的信息输入。我无法在预览中显示的第一步中获取或保留模板（是HTML）。

<div ng-show="createsignature">
  <h2  ng-model="newSignature.name" placeholder="Name this Signature" contenteditable="true">Name this signature </h2>
 <span id="cancel" class="pull-right cancel cancels" ng-click="createsignature=false"><button>CANCEL</button></span>
 <span ng-click="showpreview(); createsignature=false; newsignature=false;"id="save" class="pull-right cancel" ><button>PREVIEW</button></span>
  <div class="pull-left">
      <span id="addsi" ng-click="createsignature=false;" class="pull-left"><img src="images/b-a-c-k-btn.png"><h2> New Signature</h2></span>
    </div>
    <table class="spacing-table table ">
    <tr>
        <td><input class="fill" ng-model="echo_Name" contentEditable="true" placeholder="Name"></input></td>
        <td></td>
        <td></td>
    </tr>
     <tr>
        <td><input class="fill" ng-model="echo_Title" contentEditable="true" placeholder="Title"></input></td>
        <td></td>
        <td></td>
    </tr>
     <tr>
        <td><input class="fill" ng-model="echo_Department" contentEditable="true" placeholder="Department"></input></td>
        <td></td>
        <td></td>
    </tr>
     <tr>
        <td><input class="fill" ng-model="echo_Company" contentEditable="true" placeholder="Company"></input>
        </td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><input class="fill" ng-model="echo_Phone" contentEditable="true" placeholder="Mobile Number"></input>
        </td>
        <td></td>
         <td> <a href=""><img src="images/p-l-u-s-off-btn-copy.png"></a></td>
    </tr>
    <tr>    
         <td><input class="fill" ng-model="echo_Phone" contentEditable="true" placeholder="Office Number"></input></td>
        <td></td>
        <td> <a href=""><img src="images/p-l-u-s-off-btn-copy.png"></a></td>
    </tr>

    <tr>    
         <td><input class="fill" ng-model="echo_Phone" contentEditable="true" placeholder="Fax Number"></input></td>
        <td></td>
        <td> <a href=""><img src="images/p-l-u-s-off-btn-copy.png"></a></td>
    </tr>

    <tr>    
         <td><input class="fill" ng-model="echo_Email" contentEditable="true" placeholder="Email"></input></td>
        <td></td>
        <td> <a href=""><img src="images/p-l-u-s-off-btn-copy.png"></a></td>
    </tr>

    <tr>    
         <td><input class="fill" ng-model="echo_Website" contentEditable="true" placeholder="Website"></input></td>
        <td></td>
        <td> <a href=""><img src="images/p-l-u-s-off-btn-copy.png"></a></td>
    </tr>

    <tr>
        <td><input class="fill" ng-model="echo_Street" contentEditable="true" placeholder="Street Addres"></input></td>
        <td></td>
        <td></td>
    </tr>

     <tr>
        <td><input class="fill" ng-model="echo_Postal" contentEditable="true" placeholder="Postal Addres"></input></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><input class="fill" ng-model="echo_Social"  contentEditable="true" placeholder="Social"></input></td>
        <td></td>
        <td></td>
    </tr>

  </table>
  </div>

Answer 1

如果我理解正确，您希望在用户点击等事件后对某个元素执行某些操作。

<div ng-repeat="template in signaturetemplates">
    <h2 ng-click="selectedTemplate=template">{{template.name}}</h2>
</div>

//Somewhere else in the code...
<div ng-show="selectedTemplate">
    <h2>Selected {{selectedTemplate.name}}</h2>
    <pre>{{selectedTemplate.templatesample}}</pre>
<div>

Answer 2

一种方法是创建一个服务，然后只需注入它就可以从其他控制器，指令或其他任何内容访问它。

首先创建将保存值的服务：

core.service('shared', [function() {

  var myObj;

  return {
    setObj: function(value) {
      myObj = value;
    },
    getObj: function() {
      return myObj;
    }
  }
}]);

然后创建保存功能：

$scope.saveObj = function(myObj) {
  shared.setObj(myObj);
};

并将其应用于ng-click事件：

然后您可以使用getObj函数从另一个控制器获取对象，例如：

core.controller('SomeOtherCtrl', ['shared', function(shared) {
  $scope.myObj = shared.getObj();
}]);

并在模板中使用它：

<div>{{myObj.name}}</div>

如果您还想保留HTML，我建议您为其创建一个指令，该指令将呈现必要的HTML，然后您可以将$scope变量添加到。

core.directive('myDirective', [function() {
  return {
    restrict: 'A',
    scope: {
      myObj: '='
    },
    template: '<div>{{myObj.name}}</div>'
  }
}]);

然后像这样使用它：

<myDirective myObj="myObj"></myDirective>

如何从ng-repeat中保存元素？

2 个答案: