Guidelines for Document State

Question

Guidelines for Document State

I am looking to develop a straightforward directive that can show the status of a document. Currently, I have achieved this functionality through the controller without using a directive. However, my goal is to create a reusable directive.

https://i.sstatic.net/2i6AM.png

https://i.sstatic.net/ouReW.png

The directive would indicate the following states:

1- New: 2- Unsaved 3- Draft 4- Posted

I have created a Plunker demo: http://plnkr.co/edit/sNoHGh4c4dgYycoDAhLQ?p=preview

The directive will be placed outside the form. Is there a way for me to access its state from the directive like this:

$scope.mainform.$setSubmitted();

javascript angularjs angularjs-directive

Answer 1

Answer №1

To implement the directive, expose the function through a scope variable specified by an attribute.

angular.module("myApp").directive('once', function() {
  return {
    scope: {
        //expose API 
        onceAPI: '=once'
    },
    link: function(scope, elem, attrs) {
        scope.onceAPI = scope.onceAPI || {};
        //define function
        scope.onceAPI.setPostComplete = function() {
            console.log("post complete")
            scope.onceAPI.isPosted = true;
        }
    }
  };
});

HOW TO USE

<div once="vm.onceAPI"></div>

CONTROLLER

vm.submit = function(){
  $scope.mainform.$setSubmitted();
  var postData = {in1: vm.in1};
  $http.post(url,postData).then(function() {
      vm.onceAPI.setPostComplete();
  });
};

Check out the DEMO on PLNKR.

Answer 2

To implement the directive, expose the function through a scope variable specified by an attribute.

angular.module("myApp").directive('once', function() {
  return {
    scope: {
        //expose API 
        onceAPI: '=once'
    },
    link: function(scope, elem, attrs) {
        scope.onceAPI = scope.onceAPI || {};
        //define function
        scope.onceAPI.setPostComplete = function() {
            console.log("post complete")
            scope.onceAPI.isPosted = true;
        }
    }
  };
});

HOW TO USE

<div once="vm.onceAPI"></div>

CONTROLLER

vm.submit = function(){
  $scope.mainform.$setSubmitted();
  var postData = {in1: vm.in1};
  $http.post(url,postData).then(function() {
      vm.onceAPI.setPostComplete();
  });
};

Check out the DEMO on PLNKR.

Guidelines for Document State

Answer №1

Similar questions

Is it possible to update the state of an array within a .then() function in React?

Guide to passing arguments to a function within Vue's v-for loop?

Unexpected outcome: POST data not returning as anticipated

Ensuring data integrity and security through Firebase rules and validation for unique records

What is the best way to create random integers using JavaScript?

Discovering the modified or removed shape in the leaflet drawControl

Using regular expressions in JavaScript to permit a particular phone number pattern of (123) 456-7890 exclusively

Struggling with a character entity in Javascript? Learn how to escape it and avoid any display issues (such as showing

Unlock the power of polymer iron-ajax by seamlessly linking input element data to the iron-ajax's body attribute

Does JSON have a special reserved key for identifying the time?

Unable to implement the hover property for the entire class in CSS

Tips for choosing a specific value that matches a property value within a JSON dataset

Steps to trigger a modal (bootstrap 5) in react upon clicking a cell within the Full Calendar interface

Obtaining an authorization token through a POST request and subsequently utilizing the POST response in a GET request

Developing an HTML table with the power of JavaScript and JSON

What is the best way to retrieve data from PHP and format it into JSON for use in my jQuery script?

Interactive Query Box for Searching Key-Value Pairs

Use setTimeout and setInterval with the initial input without parentheses or double quotation marks

Arranging JSON elements according to a separate array in Angular 2 or Node.js

Stacking pseudo elements in CSS positioning