Содержания в угловых Директивах

Question

Вот fiddle

Я построил многоразовую директиву, которая может использоваться везде, где это необходимо. Но текст в директиве будет обновлен из файла JSON. Я создал объект с именем obj, в котором хранится мой текст. Предположим, что если имя форма проверки, то я хочу, чтобы добавить Condition1 как текст, но если имя форма bankterms, то я хочу, чтобы текст, как condition2.

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

You может использовать все достоинства встроенной в 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

Настройте свой собственный контроллер, а затем внутри контроллера, когда он загружает, автоматически запустить функцию, которая проверяет имя формы и устанавливает свойство объекта данных в соответствующий текст. Вам нужно только одно свойство «условие» вместо двух отдельных. Вы можете просто изменить текст свойства внутри функции, как указано выше. Технически вам даже не нужен контроллер, но это хорошая практика.

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