Geek asks and answers

Model offset in ngtemplate

I want to use the alias of the model used in the template, so that the same template can be reused for different models. For example, in the following model:

member = {

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

both "member" and "children" have the property "name". Therefore, I want to create a single template that manipulates this "name" property. I was able to achieve this with this question:

Bind ngInclude to various models

As I said, I created a directive such as:

app.directive('member', function(){
return {
    restrict: 'A',
    template: "{{prefix}}<input type='text' ng-model='member.name'>",
    scope: {
        member: "="
    }
};
});

Following is the following directive:

<div ng-controller="MemberCtrl">
    {{member | json}}
    <div member="member"></div>
    <div member="member.children[0]"></div>
</div>

I was able to achieve reuse of the template, however, since I use the "area" in my directive, this created an isolated area that cannot access any property of the control area. So for the controller:

app.controller('MemberCtrl', function($scope){
$scope.member = {

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

    $scope.prefix = "Mr.";
});

"". jsfiddle:

http://jsfiddle.net/vaibhavgupta007/mVBaC/1/

?

Edit

$parent . .

+5
2

"" .

app.directive('member', function(){
return {
    restrict: 'A',
    template: "{{prefix}}<input type='text' ng-model='member.name'>",
    scope: {
        member: "=",
        prefix: "="
    }
};
});

 

<div ng-controller="MemberCtrl">
    {{member | json}}
    <div member="member" prefix="prefix"></div>
    <div member="member.children[0]" prefix="prefix"></div>
</div>

Fiddle

+1

(, member member.children[0]) , , ( ).

" ", , , :

<div member="member" prefix="{{prefix}}" join-fn="joinNameWithPrefix(someName)"></div>

:

template: "{{prefix}}<input type='text' ng-model='member.name'>"
   + "<br>fn result={{ joinFn( {someName: member.name} ) }}",
scope: {
  member: "=",
  prefix: '@',
  joinFn: '&'
},

Fiddle

= , @ & .

0

More articles:


All Articles