0

I have a snippet of HTML with its own controller. I want to include that snippet in two different places.

If it is displayed as a child of #parent1, I want some fields hidden. If displayed as part of #parent2, I'd like other fields hidden.

I've done this before, but not when #parent1 and #parent2 can both be visible at the same time.

Thoughts?

ed4becky
  • 1,488
  • 1
  • 17
  • 54

1 Answers1

1

You are at the point where you should probably stop using ng-include and write a very simple directive instead. This is the typical use case of a angular directive with an isolated scope, just pass in a scope-variable and use it in your template with ngShow ngHide or ngIf:

 .directive('snippy', ['$rootScope',
        function ($rootScope) {
            return {
                restrict: 'E',
                scope: {
                    showit: '='
                },
                templateUrl: 'yoursnippet.html',
                link: function(scope, elem, attrs) {
                   // here goes your controller code
                }
         }

and then in yoursnippet.html:

<div>
   <div ng-show="showit">this is shown/hidden</div>
</div>

and then in your parent:

<div>
    <snippy showit="anyangularexpression">
    <snippy showit="anyangularexpression2">
</div>
Reto
  • 3,107
  • 1
  • 21
  • 33
  • I have never consider using a directive for such a large section of htnl/controller code. Hmm... – ed4becky Mar 05 '15 at 17:11
  • your question does not say anything about large/small... maybe you need to give us more info then, why you think a directive is not suitable – Reto Mar 05 '15 at 17:14
  • it may be suitable, i just hadn't thought of it. going to try – ed4becky Mar 05 '15 at 18:07