Directives and Shipping Formats

Question

Directives and Shipping Formats

I am trying to create several directives that will wrap the layout so that I can abstract from this layout (which is one of the main goals of the directives, as I understand it).

So I would like to have something like this:

<dialog>
  <dialog-title></dialog-title>
  <dialog-body></dialog-body>
  <dialog-footer></dialog-footer>
</dialog>

I created 3 simple directives for this that look like this

app.directive('dialog', ()=>{
  return {
    template: '<div class="dialog" ng-transclude></div>',
    replace: true,
    transclude: true,
    restrict: 'E',
  }
})

Then I want to make sure that the models defined in one directive (dialog-body) will be visible in another (dialog-footer), because I need some form in this dialog box, and some navigation buttons in the footer, which can be disabled, depending on which form is valid or not.

  <body ng-controller="MainCtrl">
    <p>age: {{age}}</p>
    <dialog>
      <p>age: {{age}}</p>
      <dialog-body>
        <form name="dialogForm">
          <p>age: {{age}}</p>
          <input ng-model="age" minlength="3"/>
        </form>
      </dialog-body>
      <dialog-footer>
        <p>age: {{age}}</p>
      </dialog-footer>
    </dialog>
  </body>

ng-model dialog-body , , MainCtrl. :

  <body ng-controller="MainCtrl">
    <p>age: {{user.age}}</p>
    <dialog>
      <p>age: {{user.age}}</p>
      <dialog-body>
        <form name="dialogForm">
          <p>age: {{user.age}}</p>
          <input ng-model="user.age" minlength="3"/>
        </form>
      </dialog-body>
      <dialog-footer>
        <p>age: {{user.age}}</p>
      </dialog-footer>
    </dialog>
  </body>

:

app.controller('MainCtrl', function($scope) {
  $scope.user = {age: 1}
})

dialog-body. FormController , ng-model ( - ?). .

, formController MainCtrl, - FormController? , $scope.dialogForm = {$valid: true} , :

  <body ng-controller="MainCtrl">
    <p>age: {{user.age}}</p>
    <p>validity: {{dialogForm.$valid}}</p>
    <dialog>
      <p>age: {{user.age}}</p>
      <p>validity: {{dialogForm.$valid}}</p>
      <dialog-body>
        <form name="dialogForm">
          <p>age: {{user.age}}</p>
          <p>validity: {{dialogForm.$valid}}</p>
          <input ng-model="user.age" minlength="3"/>
        </form>
      </dialog-body>
      <dialog-footer>
        <p>age: {{user.age}}</p>
        <p>validity: {{dialogForm.$valid}}</p>
      </dialog-footer>
    </dialog>
  </body>

. dialog-body, . ? ?

- , - -?

plunk

+4

angularjs angularjs-directive angularjs-ng-transclude

SET 18 '17 13:32

1

user2718281 · Accepted Answer · 2017-05-23T01:12:06+0000

. ?

transclude: true scope, MainCtrl. , , <form name="dialogForm">, angular formController dialogBody, .. dialogBody $scope.dialogForm = formController , transcluded scopes .

, , .

<body ng-controller="MainCtrl as vm">

vm

    <form name="vm.dialogForm">
      <p>age: {{vm.user.age}}</p>
      <p>validity: {{vm.dialogForm.$valid}}</p>
      <input ng-model="vm.user.age" minlength="3"/>
    </form>

. plunker

? vm , formController vm.dialogForm , .

Directives and Shipping Formats

More articles: