Angular inserted HTML not attached to controller

Question

I want to use Angular to create a popover that contains a <textarea> and a <button> to perform an action.

I followed this guide to create my popover with a custom directive.

My problem is that the content in the popover doesn't appear to be attached to the main controller anymore when it is inserted. The contents of the <textarea> does not display with {{ textarea }}, and the ng-click="click()" does not trigger the $scope.click function defined in the controller.

Maybe this is due to the fact that the content of the popover is being set in the directive, instead of being declared in the view1.html document? Any help would be appreciated.

I've made this JSFiddle which demonstrates the issue - it is very slightly simplified from the code below, but the problem is demonstrated just fine.

directives.js:

module.directive('customPopover', [function(){
    return {
        restrict: 'A',

        link: function (scope, el, attrs) {

            $(el).popover({
                trigger: attrs.popoverTrigger,
                html: true,
                content: function() {return $('#popover_content').html();},
                placement: attrs.popoverPlacement
            });

        }
    };
}]);

pages/view1.html:

<div>
    <div id="controls">
        <a custom-popover class="btn" 
            tabindex="0"
            popover-html="copyPaste" 
            popover-placement="right"
            popover-trigger="click" 
            role="button">Copy & paste data</a>

    </div>

    <div id="popover_content" style="display:none;">
        <textarea id="textBox" type="text" ng-model="textarea"></textarea>
        <button id="submitDataBtn" ng-click="click()" type="button">Submit</button>
    </div>

    {{ textarea }}
</div>

controller.js

var module = angular.module("moduleName", ['ngRoute']);

module.controller("SimpleController", function ($scope, gsatfFactory, $sce, $location) {
    $scope.click = function() {
        $scope.table = $sce.trustAsHtml(gsatfFactory.parseData($scope.textarea));
        $location.path('view2');
    };
});

module.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'pages/view1.html',
            controller: 'SimpleController'
        })
        .when('/view2', {
            templateUrl: 'pages/view2.html',
            controller: 'SimpleController'
        })
        .otherwise({ redirectTo: '/' });

}]);

index.html

<!DOCTYPE html>

<html ng-app="moduleName">

    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
        crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>
        <script src="js/controller.js"></script>
        <script src="js/factory.js"></script>
        <script src="js/directives/directives.js"></script>

    </head>

    <body>
        <div data-ng-view></div>
    </body>

</html>

Stefan Yohansson · Accepted Answer · 2015-12-13 01:19:47Z

2

Your content html isn't angular compiled. Use this to compile it:

$compile($('#popover_content').html())(scope);

your directive:

mod.directive('customPopover', function($compile){
    return {
        restrict: 'A',

        link: function (scope, el, attrs) {

            $(el).popover({
                trigger: attrs.popoverTrigger,
                html: true,
                content: function() {return $compile($('#popover_content').html())(scope);},
                placement: attrs.popoverPlacement
            });

        }
    };
});

answered Dec 13, 2015 at 1:19

Stefan Yohansson

6776 silver badges17 bronze badges

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

1 Comment

Shaun Scovil Over a year ago

Correct. Here is a plnkr to demonstrate: plnkr.co/edit/m3EsBMS8Nq2YlYwhrS5X?p=preview

Collectives™ on Stack Overflow

Angular inserted HTML not attached to controller

directives.js:

pages/view1.html:

controller.js

index.html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

directives.js:

pages/view1.html:

controller.js

index.html

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related