Angular dynamic template with controller

Question

I am trying to add a template with a controller using a directive:

<div directOne>
</div>

Directive:

a.directive("direct-one", function ($templateRequest, $compile, $controller) {
return {
    link: function (scope, elem, attrs) {
        $templateRequest("template.html").then(function (html) {
            var $scope = scope.$new();
            $controller('oneController', {$scope, $scope});
            var template = angular.element(html);
            $(elem).append(template);
            template = $compile(template)(scope);
        });
    }
  };
});

template:

<span ng-bind="test"></span>
<div ng-controler="oneController">
</div>

controller:

app.controller('oneController', function () {
   $scope.test = '123456';
}

My problem that is the test value is not shown.

I have seen some working samples of what I am doing. My real code is more complex.

Hope, someone can help me.

Thanks

Update 1 My code should look like this then:

<div  style="width:90%;height:100%">
     <div ng-controler="oneController" directOne>        
</div>

And that code is a part of another template with its own controller. So, unless I have $scope.test on the parent controller the data is not shown.

Possible duplicate of AngularJS directive dynamic templates

Sean Larkin
– Sean Larkin

2016-02-12 21:45:34 +00:00
Commented Feb 12, 2016 at 21:45 — Sean Larkin
– Sean Larkin, Commented Feb 12, 2016 at 21:45

Luka Jacobowitz · Accepted Answer · 2016-02-12 20:22:12Z

1

You need to wrap the Controller div around anything that accesses your controller. So it should be:

 <div ng-controler="oneController">
     <span ng-bind="test"></span>
 </div>

answered Feb 12, 2016 at 20:22

Luka Jacobowitz

23.7k5 gold badges41 silver badges58 bronze badges

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

Comments

Pankaj Parkar · Accepted Answer · 2016-02-12 20:40:31Z

1

You need to do exactly opposite of what you are currently doing.

While defining directive you should name it as directOne & then use that directive with - separated value instead of Upper case letter like direct-one.

ng-bind="test" value haven't evaluated because you attached controller to directive DOM.

For fixing your issue, you need to compile your new template.html element with $controller('oneController', {$scope, $scope}); scope, then will be able to evaluate the value of test variable.

Otherwise you could easily fix this by using directive controller option.

Markup

<div direct-one></div>

Directive

a.directive("directOne", function ($templateRequest, $compile, $controller) {
return {
    //controller: 'oneController',
    link: function (scope, elem, attrs) {
        $templateRequest("template.html").then(function (html) {
            var $scope = scope.$new();
            //stored oneController scope in variable
            var controllerScope = $controller('oneController', {$scope, $scope});
            var template = angular.element(html);
            $(elem).append(template);
            template = $compile(template)(controllerScope); //compiled with oneController scope
        });
    }
  };
});

edited Feb 12, 2016 at 20:40

answered Feb 12, 2016 at 20:24

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

1 Comment

Pankaj Parkar Over a year ago

@Mark do look at updated answer..that most probably help you.. Thanks :)

Collectives™ on Stack Overflow

Angular dynamic template with controller

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related