Question

这是fiddle

我已经构建了可重用的指令，可以在任何需要的地方使用。但是指令中的文本将从JSON文件更新。我创建了一个名为obj的对象，其中存储了我的文本。假设表单名称是验证，那么我想将 condition1 添加为文本，但如果表单名称是 bankterms ，那么我想将文本作为条件2 即可。

HTML

<div ng-app='demo'>
<form name="verification" ng-controller="myCtrl1">

    <terms-conditions conditions="conditions" checked="checked"></terms-conditions>   <br>
    <button class="btn-primary" ng-disabled="!checked" >Submit</button>
      <hr>


</form>

    <form name="bankinfo" ng-controller="myCtrl2">
          <terms-conditions conditions="conditions" checked="checked"></terms-conditions>  <br>
       <button class="btn-primary" ng-disabled="!checked">Submit</button>
      <hr>
</form>
</div>

CSS

span {
font-weight:bold;
}
.terms{font-weight: normal;
width: 500px;
height: 50px;
overflow-y: scroll;
padding: 5px 5px 5px 5px;
border-style: solid;
border-color: #666666;
border-width: 1px;}

js

var demo = angular.module('demo', []);
var data= {
condition1:"Payments terms",
condition2:"Bank terms"
}
demo.directive("termsConditions",function(){
return {
    restrict:"E",
    scope:{
        conditions:'=',
        checked:'='
    },
    template:
    "<div class='terms row'><span class='col-md-12'>{{data.condition1}}</span></div><br><input type='checkbox' ng-model='checked'><span>Yes, I agree to the terms and condtions</span>"
}

});

Answer 1

你可以利用Angular的内置form指令的所有好处，并与它一起玩。

主要思想是要求您的指令位于form指令内require: '^form'，这将允许您使用与链接函数中定义的form指令相同的控制器（作为第四个参数），制作一个controller.$name魔法并检查表单是否有效<form_name>.$valid条件。为了告诉form指令复选框是必需的，您只需要在其上放置required属性即可。这也将允许避免控制器内部的其他逻辑来验证每个表单。

除此之外，如果您关心性能，请不要通过指令范围定义不必要的数据绑定。实际上对于你的情况你也不需要孤立的范围 - 只要一个子范围就足够了（scope:true）。为了从父作用域中获取所有条件，您可以使用$interpolate服务。

<强>的JavaScript

angular.module('app', []).
  controller('ctrl', ['$scope', function($scope) {
    $scope.conditions = {
      'verification': 'T&C for verification',
      'bankInfo': 'T&C for bank info'
    }
  }]).
  directive('termsConditions', ['$interpolate', function($interpolate) {
    return {
      restrict: 'E',
      require: '^form',
      template: '<div>' +
                  '<textarea>{{termsAndConditions}}</textarea>' +
                  '<br/>' +
                  '<input type="checkbox" ng-model="checked" required><span>Yes, I agree to the terms and condtions</span>' +
                '</div>',
      scope: true,
      link: function(scope, iElement, iAttrs, controller) {
        scope.termsAndConditions = $interpolate('{{'+ iAttrs.conditions + '["' + controller.$name + '"]}}')(scope);
      }
    }
  }]);

<强> HTML

<form name="verification">
  <terms-conditions conditions="conditions"></terms-conditions>
  <button ng-disabled="!verification.$valid">Submit</button>
</form>

<form name="bankInfo">
  <terms-conditions conditions="conditions"></terms-conditions>
  <button ng-disabled="!bankInfo.$valid">Submit</button>
</form>

Plunker ：http://plnkr.co/edit/S5uCQjvRfwwAOC8s6itE?p=preview

Answer 2

设置您自己的控制器，然后在加载时在控制器内部，自动运行一个函数，该函数检查表单的名称并将数据对象属性设置为正确的文本。你只需要一个属性＆＃34; condition＆＃34;而不是两个单独的。您可以如上所述更改函数内的属性文本。从技术上讲，你甚至不需要控制器，但这是一种很好的做法。

function () {

  var getFormName = /* get your form name however you want */;

  if (getFormName == 'verification') {
    data.condition = 'Payments terms';
  } else if (getFormName == 'bankterms') {
    data.condition = 'Bank terms';
  }

}

Answer 3

我认为您不需要将所有条件传递到指令中，保持简单并且只是传递您想要显示的条件

http://jsfiddle.net/frgjqu0s/

var demo = angular.module('demo', []);
var data= {
    condition1:"Payments terms",
    condition2:"Bank terms"
}
demo.directive("termsConditions",function(){
    return {
        restrict:"E",
        scope:{
            condition:'@',
            checked:'='
        },
        template:
        "<div class='terms row'>" + 
        "<span class='col-md-12'>{{condition}}</span>" + 
        "</div><br>" + 
        "<input type='checkbox' ng-model='checked'>" +
        "<span>Yes, I agree to the terms and condtions</span>"
    }

});

demo.controller('myCtrl1', function($scope){
    if ('YOUR LOGIC' == 'YOUR LOGIC'){
        $scope.condition = data.condition1;
    }
});

demo.controller('myCtrl2', function($scope){
    if ('YOUR LOGIC' == 'YOUR LOGIC'){
        $scope.condition = data.condition2;
    }
});

Angular Directive中的内容

3 个答案: