AngularJS контроллер внутри директивы с привязкой

Question

У меня есть этот простой код моей директивы:

app.directive('ngModal', function ($parse) { 
    return { 
    restrict: 'E', 
    template: document.getElementById('ng-modal').innerHTML, 
    replace: true, 
    controller : "@", 
    name:"controllerName", 
    } 
}) 

<ng-modal controller-name="ModalCtrl"></ng-modal> 

И это мой контроллер:

app.controller('ModalCtrl', ['$scope', function ($scope) { 
    $scope.model = 'default text' 
}]) 

<div ng-controller="ModalCtrl"> 
    <input type="text" ng-model="model"> 
</div> 

Я хочу, чтобы модель поля внутри моей директивы будет обновляться автоматически , Но я вижу «текст по умолчанию» всегда внутри директивы и изменен внутри контроллера. Как я могу связать его?

Answer 1

Вам необходимо добавить службу для хранения информации между контроллерами. Контроллеры всегда создаются на «просмотр», поэтому ваши ng-модальные и div имеют разные используемые контроллеры, поэтому данные модели не обновляются между ними.

Быстрый пример:

app.service('sharedData', function() { 
    var sharedData = { 
    field: 'default text' 
    }; 

    return sharedData; 
}); 

app.directive('ngModal', function() { 
    return { 
    restrict: 'E', 
    template: '', 
    replace: true, 
    controller : "@", 
    name:"controllerName", 
    } 
}); 

app.controller('ModalCtrl', ['$scope', 'sharedData', function ($scope, sharedData) { 
    $scope.model = sharedData; 
}]); 

<ng-modal controller-name="ModalCtrl">{{model.field}}</ng-modal> 

<div ng-controller="ModalCtrl"> 
    <input type="text" ng-model="model.field"> 
</div>