2015-03-04 4 views
0

У меня есть простой контроллер:Ng-модель не работает для директивы атрибута

.controller("TestController",['$scope', function($scope) { 
    this.p = {}; 
    this.p.name = "Foo"; 
    this.p.surname = "Bar"; 
}]); 

И у меня есть директива, призывающую этот контроллер:

app.directive('cronosDataset',[function() { 
    return { 
    restrict: 'A', 
    controller:'TestController', 
    controllerAs: "ctrl", 
    scope: { 
     cronosDataset : "@" 
    } 
    }; 
}]) 

Если я позвоню контроллеру с помощью нг-контроллера в ng-model отлично работает. Но если я называю это через директивы она не обновляет вид:

<!-- This works --> 
Works 
<br/> 
<div class="sideMenu"> 
    <form ng-controller="TestController as ctrl"> 
     Name: <input type="text" ng-model="ctrl.p.name" /> 
     Surname: <input type="text" ng-model="ctrl.p.surname" /> 
    </form> 
</div> 

<!-- This one doesn't work --> 
Doesn't work 
<br/> 
<div class="sideMenu"> 
    <form cronos-dataset="People"> 
     Name2: <input type="text" ng-model="ctrl.p.name" /> 
     Surname2: <input type="text" ng-model="ctrl.p.surname" /> 
    </form> 
</div> 

Edit: я могу заставить его работать, если я не использую изолированный объем (scope : {...} в определении директивы). Я использую только изолированную область, чтобы иметь доступ к этому атрибуту scope: { cronosDataset : "@" } внутри моего контроллера. Если есть другой способ сделать это без использования изолированной области, то проблема решена!

То, что я пытаюсь архив повторно использовать логику, я сделал, чтобы получить данные из примера базы данных:

<form cronos-dataset="People"><input type="text" ng-model="p.name" /></form> 
<form cronos-dataset="Car"><input type="text" ng-model="p.model" /></form> 
<form cronos-dataset="Address"><input type="text" ng-model="p.street" /></form> 

В моем контроллере я иду к database (Ajax с использованием cronos-dataset в качестве параметра запроса) и положить результат возвращается в p переменной. Поэтому мне нужны две вещи:

1 - Have access to attribute inside the controller 
2 - Update the ng-model with a scope variable 

Имеет ли смысл?

Вот PLUNKER

+0

Директива определяет изолированный объем, поэтому 'ctrl' недоступен. –

+0

Является ли это способом сделать область действия директивы доступной для дочерних узлов? – nanndoj

+0

Вам действительно нужна изолированная область? – charlietfl

ответ

1

Я раздвоенный ваш Plunker добавить перенаправление. Директива Передает элемент, полностью заменяя его. Затем он берет клонированное (исходное содержимое) и вставляет их в Transclusion, делая исходные элементы компилируемыми как часть директивы.

app.directive('cronosDataset',[function() { 
    return { 
    restrict: 'A', 
    controller:'TestController', 
    controllerAs: "ctrl", 
    scope: { 
     cronosDataset : "@" 
    }, 
    transclude: 'element', 
    replace: true, 
    link: function(scope, elem, attrs, ctrl, transclude) { 
     transclude(scope, function(clone) { 
     elem.after(clone); 
     }); 
    } 
    }; 
}]) 
+0

Это волшебство! Теперь это работает как шарм. Если бы я мог, я бы дал вам 10 голосов. – nanndoj

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