CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
future
future

Reputation: 352

Content in Angular Directive

Here's fiddle

I have built the reusable directive which can be used wherever needed. But the text in the directive will be updated from JSON file. I have created a object named obj in which my text is stored. Suppose if the form name is verification then i want to add condition1 as a text but if form name is bankterms then i want to text as 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>"
}

});

Upvotes: 0

Views: 163

Answers (3)

Vadim
Vadim

Reputation: 8779

You can leverage all the goodies of Angular's build-in form directive and play together with it.

The main idea is to require your directive to be inside a form directive with require: '^form', that will allow you to use the same controller as form directive defines in you link function (as forth argument), make a controller.$name magic and check if the form is valid or not with <form_name>.$valid condition. In order to tell form directive checkbox is required, all you need is to place required attribute on it. That will also allow to avoid additional logic inside your controller for validating each form.

Besides of it, if you care about performance, don't define unnecessary data bindings via your directive scope. Actually for your case you don't need isolated scope either - just a child scope will be enough (scope:true). In order to get all conditions once from your parent scope, you can use $interpolate service.

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

Upvotes: 3

Ben Fischer
Ben Fischer

Reputation: 6402

I don't think you need to pass all of your conditions into the directive, keep it simple and just pass the condition that you want to display

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

Upvotes: 1

Organiccat
Organiccat

Reputation: 5651

Set up your own controller, then inside the controller when it loads, automatically run a function which checks the name of the form and sets the data object property to the proper text. You only need one property "condition" instead of two separate ones. You can just change the text of the property inside the function as mentioned above. Technically you don't even need a controller, but it's good practice.

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

}

Upvotes: 1

Related Questions