0

ng-click is not working as it should. I tried looking at documentation and tutorials but couldn't find the reason.

I have a JavaScript variable storing html template. which by using

document.getElementById('someId').innerHTML = emptypage;

where emptypage is a JavaScript variable, is implemented inside a div with id=someId.

My Code: 

var emptypage=` <md-toolbar `+ this.createID() +` class="md-accent 
 soopsObject" ng-app="vdApp">
        <span class="example-spacer ng-controller="vdNav">
            <md-sidenav class="md-sidenav-left" md-component-id="left" md- 
             disable-backdrop md-whiteframe="4">
                <md-content layout-margin>
                    <p>
                        About
                    </p>
                    <p>
                        Contact
                    </p>
                    <md-button ng-click="toggleLeft()" class="md-accent">
                        Close
                    </md-button>
                </md-content>
            </md-sidenav>
            <div>
                <md-button ng-click="toggleLeft()">
                    <md-icon>menu</md-icon> Menu
                </md-button>
            </div>
    </span>         
    </md-toolbar>`;

My Controller:

    var nav=angular.module("vdApp", []);
    nav.controller("vdNav", function($scope, $mdSidenav) {
    alert("inside leftToggle");

    $scope.toggleLeft = buildToggler('left');

    function buildToggler(componentId){
        return function(){
            $mdSidenav(componentId).toggle();
        };
    }
});

Even alert isn't working. What am I doing wrong? Any help or suggestion is appreciated.

Improve this question
10
  • 1
    Is there an ng-controller somewhere telling AngularJS that the HTML code you posted is supposed to be handled by the vdNav controller? Or something else having the same effect (a route definition)? Commented Jul 7, 2018 at 17:05
  • Yes it is. Actually ng-app and ng-controller are there in the parent element of the div element. Commented Jul 7, 2018 at 17:13
  • Post a complete, minimal example reproducing the problem. Look for errors in your console. If there is one, fix it. Commented Jul 7, 2018 at 17:15
  • 1
    ng-app can only work if it's in the page when angular.js is executed. You're adding it dynamically (for a reason I can't understand), so that can't work. Read the documentation of ng-app. Commented Jul 7, 2018 at 17:43
  • 1
    When HTML with AngularJS directives is added to the DOM, those directives need to be compiled and linked to the AngularJS framework. DOM manipulation should only be done by the AngularJS framework, not by JavaScript. Commented Jul 8, 2018 at 12:35
Related questions
0
AngularJS - ngClick not working on dynamically added html
0
angularjs ng-click is not being called
0
AngularJS: Template-added ng-click does not fire
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.