AngularJS creating a directive to extend ng-include with proper base url

Question

So due to restrictions I have at work I am getting some pretty long includes. To avoid this I have tried creating the following directive:

app.directive('viewInclude', [function() {
        var baseUrl = 'fams360frontend/views/default/glap';
        return {
            scope: {
                viewInclude: '@'
            },
            template: '<div ng-include="link"></div>',
            link: function($scope) {
              $scope.link = baseUrl + $scope.viewInclude;                  
            }
        };
    }]);

I then call it like this:

<view-include src="'/partials/ientry-header.html'"></view-include>

I am pretty new to Angular so this may be a simple issue but I can't seem to figure out where I am going wrong. I get this error on render:

Error: [$parse:syntax] 

EDIT:

I have updated my code using the answer below but I now no longer get the bank bindings...any ideas?

The included file:

<div style="display: inline-block;">
    <div style="display: inline-block;">
        <span>Bank Account:</span>
    </div>
    <div style="display: inline-block; margin-left: 10px;">
        <span>{{bank.bank_number}} - {{bank.account_name}}</span>
    </div>
</div>
<div style="display: inline-block; margin-left: 75px;">
    <div style="display: inline-block;">
        <span>Company:</span>
    </div>
    <div style="display: inline-block; margin-left: 10px;">
        <span>{{bank.company_number}} - {{bank.company_name}}</span>
    </div>
</div>

Is there a reason you don't just concatenate scope.viewInclude with the baseUrl? — Matthew Green
– Matthew Green, Commented Sep 17, 2015 at 15:41
Your edit should really be a second question since it sounds like the answer below helped get you past your original issue. — Matthew Green
– Matthew Green, Commented Sep 17, 2015 at 15:56
Yes and no since what good is it for me to now be able to bring in a template if all the bindings inside break. Its more that I didn't clarify enough in my original question imo. Now I am clarifying....the include will need to keep any bindings in it valid. — Bill Garrison
– Bill Garrison, Commented Sep 17, 2015 at 16:01
its definitely a fine line but I feel that many people will have bindings in their templates and if you can just throw it in the answer then it'll save everyone the headache of searching through multiple questions — Bill Garrison
– Bill Garrison, Commented Sep 17, 2015 at 16:02

micah · Accepted Answer · 2015-09-17 15:47:19Z

2

Add a link function and concatenate.

app.directive('viewInclude', [function() {
    var baseUrl = 'fams360frontend/views/default/glap';
    return {
        replace: true,
        scope: {
            viewInclude: '@'
        },
        template: '<div ng-include="link"></div>',
        link: function($scope) {
          $scope.link = baseUrl + $scope.viewInclude;                  
        }
    };
}]);

Additionally. I believe your html needs to be.

<div view-include="asdf"></div> <!-- view-include should be an attribute. And since you're using `@` you don't need to wrap the string in single quotes -->

edited Sep 17, 2015 at 15:47

answered Sep 17, 2015 at 15:40

micah

8,19611 gold badges65 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bill Garrison Over a year ago

says $scope is not defined

Matthew Green Over a year ago

Also of note, replace is deprecated so you will not what to use that option if at all possible.

Bill Garrison Over a year ago

first off link did not need curly braces. Second, please see my edit to see new issue

Matthew Green Over a year ago

I missed the note in the docs that ngInclude could take an expression along with a string.

charlietfl · Accepted Answer · 2015-09-17 16:23:53Z

0

Based on comment about losing bindings that is due to the isolated scope you are creating.

A simpler approach would be to not use isolated scope or even ng-include(which creates a child scope) and just use the templateUrl: fn() of directive:

directive('viewInclude', function() {
 var baseUrl = 'fams360frontend/views/default/glap';
  return {
    templateUrl: function(elem, attr){
      return baseUrl + attr.src;
    }
  };
});

Scope of directive will be whatever the scope of parent is wherever it is used this way. Directive is only being used to define source path of template

NOTE: remove extra quotes in your src shown in question

<view-include src="/partials/ientry-header.html"></view-include>

edited Sep 17, 2015 at 16:23

answered Sep 17, 2015 at 16:12

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

AngularJS creating a directive to extend ng-include with proper base url

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related