Содержание Директивы Angularjs не связано с областью изоляции - PullRequest
Новая
       6

Содержание Директивы Angularjs не связано с областью изоляции

0 голосов
/ 23 мая 2018

Я работаю с директивами, и моя цель - привязать значение к моему компоненту внука и обновить родительский элемент, но этот код не всплывает до корня. 

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('root', function ($scope) {
  vm = this;
	vm.value = 'Joe Doe';
});

myApp.directive('child', function () {
	return {
  	restrict: 'A',
    scope: {
      paramOne: '=paramOne'
    },
    link: function (scope, elm, attrs) {
      console.log('Child value: ', scope.paramOne);
    }
  }
});

myApp.directive('grandchild', function () {
	return {
  	restrict: 'A',
    scope: {
      paramTwo: '=paramTwo'
    },
    link: function (scope, elm, attrs) {
      console.log('Grandchild value: ', scope.paramTwo);
    }
  }
});
<script src="//unpkg.com/angular/angular.js"></script>

<div ng-app="myApp" ng-controller="root as vm">
  Field Value: <strong>{{vm.value}}</strong>
  <hr>
  <div child param-one="vm.value">
    Child param value: {{paramOne}}    
    <div grandchild param-two="paramOne">
      Granchild param value: {{paramTwo}} <br>
      <input type="text" ng-model="paramTwo" >
    </div>
  </div>
</div>

Я провел некоторое исследование, но не нашел решения для этого случая.Буду признателен за любую помощь:)

1 Ответ

0 голосов
/ 23 мая 2018

В директивах необходимо включить содержимое и присоединить его к элементу в функции связывания: 

    transclude: true,
    link: function (scope, elem, attrs, ctrl, transcludeFn) {
      transcludeFn(scope, function(clone) {
        elem.append(clone);
      });

DEMO 

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('root', function ($scope) {
    vm = this;
    vm.value = 'Joe Doe';
});

myApp.directive('child', function () {
return {
    restrict: 'A',
    scope: {
      paramOne: '=paramOne'
    },
    transclude: true,
    link: function (scope, elem, attrs, ctrl, transcludeFn) {
      transcludeFn(scope, function(clone) {
        elem.append(clone);
      });

      console.log('Child value: ', scope.paramOne);
    }
  }
});

myApp.directive('grandchild', function () {
return {
    restrict: 'A',
    scope: {
      paramTwo: '=paramTwo'
    },
    transclude: true,
    link: function (scope, elem, attrs, ctrl, transcludeFn) {
      transcludeFn(scope, function(clone) {
        elem.append(clone);
      });

      console.log('Grandchild value: ', scope.paramTwo);
    }
  }
});
<script src="//unpkg.com/angular/angular.js"></script>

<div ng-app="myApp" ng-controller="root as vm">
  Field Value: <strong>{{vm.value}}</strong>
  <hr>
  <div child param-one="vm.value">
    Child param value: {{paramOne}}    
    <div grandchild param-two="paramOne">
      Granchild param value: {{paramTwo}} <br>
      <input type="text" ng-model="paramTwo" >
    </div>
  </div>
</div>
...