CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-include
Bill Garrison
Bill Garrison

Reputation: 2237

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

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] <!-- ngInclude: fams360frontend/views/default/glap{{viewInclude}} -->

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>

Upvotes: 0

Views: 414

Answers (2)

charlietfl
charlietfl

Reputation: 171698

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>

Upvotes: 0

micah
micah

Reputation: 8116

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 -->

Upvotes: 2

Related Questions