2013-03-29 2 views
0

Можно ли указать модель для ngInclude, чтобы любые изменения, сделанные внутри включенного шаблона, отражались на указанной модели. Например:Bind ngInclude для разных моделей

У меня есть модель, такие как:

$scope.member = { 

    name: "Member1", 
    children:[ 
    { 
     name:"Child1" 
    }, 
    { 
     name:"Child2" 
    } 
    ] 
}; 

и шаблон:

<script type="text/ng-template" id="name.html"> 
    <input type="text" ng-model="member.name"/> 
</script> 

Теперь есть возможность пройти ngInclude либо «член» или любой ребенок и получить их соответствующие свойства имени изменены? Я попытался передать ng-модель в ng-шаблон, но это не сработает. Я попытался динамически загрузить область с предполагаемой моделью, но если модель будет удалена, я останусь сиротским шаблоном. Ниже приводится jsfiddle код:

http://jsfiddle.net/vaibhavgupta007/p7E5K/

Я хотел бы повторно использовать шаблон, а не дублировать один и тот же шаблон для различных моделей. Я refered на этот вопрос:

How to specify model to a ngInclude directive in AngularJS?

Но здесь модели не получают удалены.

Редактировать

Я не понял концепции создания пользовательских директив до сих пор. Но создаст новую директиву в сочетании с помощью ng-include?

+0

, вероятно, легче оценивать, используя либо директиву, либо привязку событий выбора к вашей форме. Пример слишком груб, чтобы понять использование. Можете ли вы предоставить html-рендеринг того, как вы хотите это использовать? – charlietfl

ответ

1

Ответ на ваш последний вопрос: да. В директиве вы также определяете шаблон и область действия. Содержание области полностью в ваших руках.

Смотрите здесь: http://jsfiddle.net/vgWQG/1/

Использование:

Member: <member model="member"></member> 
<ul> 
    <li ng-repeat="child in member.children"> 
     Child {{$index}}: <member model="child"></member> 
    </li> 
</ul> 

директива:

app.directive('member', function(){ 
return { 
    template : '<input type="text" ng-model="member.name"/>', 
    replace : true, 
    restrict: 'E', 
    scope : { 
     'member' : '=model' 
    }, 
    link: function(scope, element, attr) {} 
}; 

});

Я переместил шаблон в встроенном варианте, потому что я не мог заставить кеш шаблона работать в jsfiddle. В реальном мире, templateUrl: 'name.html' должно быть хорошо.

Это то, что вы хотите?

+0

Однако правильное присвоение имен было бы _member-editable_ или дополнительным атрибутом _editable_, который выводит ввод вместо значения readonly по умолчанию. – knalli

+0

Спасибо за ответ. Это именно то, что мне нужно. Требуется ли в директиве templateUrl всегда внешний ресурс? Шаблон включен в мою страницу, но templateUrl = "'name.html'" отправляет запрос. – Vaibhav

+0

@knali Спасибо за вашу помощь. Однако я застрял в другом сценарии. Шаблон не может получить доступ к любому свойству из области управления. Пожалуйста, обратитесь к этой скрипте: http://jsfiddle.net/vaibhavgupta007/mVBaC/1/ – Vaibhav

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