0

Is it possible to specify model for ngInclude so that any changes done inside the included template are reflected on the specified model. For instance:

I have a model such as :

$scope.member = {

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

and the template:

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

Now is it possible to pass ngInclude either "member" or any child and get their respective name properties modified? I tried passing ng-model to the ng-template but it doesn't work. I tried to dynamically load the scope with the intended model but if the model gets delete, I am left with an orphan template. Following is the jsfiddle code:

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

I wish to reuse the template rather than duplicating the same template for different models. I have refered to this question:

How to specify model to a ngInclude directive in AngularJS?

But here models are not getting deleted.

Edit

I have not grasped the concepts of creating custom directives till now. But will creating a new directive in conjuction with ng-include help?

Community
  • 1
  • 1
Vaibhav
  • 569
  • 6
  • 31
  • likely easier appraches using either directive or binding selection events to your form. Example is too crude to understand useage. Can you provide an html rendering of how you want to use this? – charlietfl Mar 29 '13 at 12:46

1 Answers1

1

The answer of your last question is: yes. In a directive, you define also a template and a scope. The content of the scope is completely in your hands.

See here: http://jsfiddle.net/vgWQG/1/

Usage:

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

The directive:

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) {}
};

});

I've moved the template in an inline variant because I could not getting the template cache getting to work in jsfiddle. In a real world, a templateUrl: 'name.html' should be fine.

This is what you want?

knalli
  • 1,973
  • 19
  • 31
  • However, a proper naming would be _member-editable_ or an additional attribute _editable_ which renders out the input instead of a default readonly-value. – knalli Mar 29 '13 at 13:25
  • Thanks for the response. This is exactly what I needed. Do templateUrl in directives always require external resource? The template is included in my page but templateUrl = "'name.html'" sends a request. – Vaibhav Mar 31 '13 at 10:22
  • @knali thanks for your help. However I am stuck in another scenario. The template is unable to access any property from the controller scope. Please refer to this fiddle: http://jsfiddle.net/vaibhavgupta007/mVBaC/1/ – Vaibhav Mar 31 '13 at 11:21
  • The scope is defined isolated, so you have to apply an additional argument like here: http://jsfiddle.net/7w5cM/ You should remember: How can you be sure that the directive would found _prefix_? Only if you define it. Your fiddle shows a tiny dependency (the model key _prefix_). – knalli Mar 31 '13 at 17:15
  • Because of not working *templateCache*: This seems to be a jsfiddle thing.. the HTML is being modified or so.. I don't know. If you put the Template at the top, it works: http://jsfiddle.net/LLMWh/ – knalli Mar 31 '13 at 17:23
  • Thanks for you answer. It means the directive has to define before hand what all variables it needs from the parent scope. However if I have to call a helper function from the parent scope, it might not be possible. Is it correct? – Vaibhav Apr 01 '13 at 06:50
  • Since parent scope is not exposed in a directive if I define an isolate scope, the template will not be able to call any helper function like "getNameWithPrefix()" defined in parent controller. I may either have to do $parent.getNameWithPrefix() – Vaibhav Apr 01 '13 at 13:12
  • That' right. But you will then have a strong binding against each other. – knalli Apr 01 '13 at 18:00
  • If you have to provide a function, you can do this with an additional scope binding (`& `). – knalli Apr 01 '13 at 18:00