Директива внутри директивы и ngModel

Я пытаюсь создать директиву, которая использует другую директиву.Директива внутри директивы и ngModel

Основная директива, нарисуйте строку, чтобы редактировать каждый элемент отдельно.

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

Используйте приведенный ниже пример:

<html> 
    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script> 
    </head> 
    <body ng-app="app" ng-controller="Ctrl"> 
    <input type="text" ng-model="values"> 
    <editors model="values"> 

    <script> 
     var app = angular.module('app', ['ui.bootstrap']); 
     app.controller('Ctrl', ['$scope', function($scope) { 
      $scope.values = '1 2'; 
     }]); 

     app.directive('editors', function() { 
      return { 
       restrict: 'E', 
       template: '<accordion><accordion-group heading="Editor 1 - {{field1}}"><editor model="field1"></accordion-group><accordion-group heading="Editor 2 - {{field2}}"><editor model="field2"></accordion-group>', 
       scope: { 
        model: '=model' 
       }, 
       controller: ['$scope', function($scope) { 
        $scope.$watch('model', function() { 
         var values = $scope.model.split(' '); 
         $scope.field1 = values[0]; 
         $scope.field2 = values[1]; 

         $('body').append($scope.field1 + ' - '); 
         $('body').append($scope.field2+ '<br>'); 
        }); 
       }] 
      }; 
     }); 

     app.directive('editor', function() { 
      return { 
       restrict: 'E', 
       template: '<input type="text" ng-model="model"> {{model}}', 
       scope: { 
        model: '=model' 
       } 
      }; 
     }); 
    </script> 
    </body> 
</html>

Image 1 - Изменение значения в field1 (Editor 1) не влияет на название аккордеона.

Iamge 2 - Изменение значения корня (вход за пределами аккордеона) обновляет поля (поле1 и поле2) и заголовок аккордеона.

Image 1 and 2

Как я могу заставить его работать, когда я изменить значение редактора 1, чтобы обновить аккордеона заголовок?

источник

2015-07-09 Beto Neto

НИКОГДА НИКОГДА НИКОГДА НИКОГДА КОГДА-ЛИБО НИКОГДА не используйте префикс «ng» в своих собственных директивах !!!!

ng-model - это директива, разработанная и поддерживаемая угловыми. Он создаст свой собственный масштаб.

Предполагается получить строку и ничего больше.

Просто связать его таким образом:

  scope: { 
       model: '=model' 
      },

источник

2015-07-09 11:56:09

Я изменил код, но проблема по-прежнему. –

Директива внутри директивы и ngModel

ответ

Смежные вопросы