Shanzid S. Bidhan Shanzid S. Bidhan - 4 months ago 7
AngularJS Question

Calling angular js with javascript

I'm honestly really new to angularjs and this might sound like a really stupid question.
I'm trying to place a md-list on my page:

function apply(list){
angular.module('App', ['ngMaterial']).controller('ListCtrl', function($scope, $mdDialog) {
$scope.people = list;
$scope.goToPerson = function(person, event) {
$mdDialog.show(
$mdDialog.alert()
.title('Navigating')
.textContent('Inspect ' + person)
.ariaLabel('Person inspect demo')
.ok('Neat!')
.targetEvent(event)
);
};
});
}
}


HTML:

<md-list ng-controller="ListCtrl" ng-cloak>
<md-subheader class="md-no-sticky">Now online</md-subheader>
<md-list-item ng-repeat="person in people" md-ink-ripple ng-click="goToPerson(person.name, $event)" class="noright">
<p style="color:white; border-bottom: 1px solid rgba(225,225,225,.2); height:45px; line-height:45px">{{ person.uuids }}</p>
<md-icon md-svg-icon="social:android" aria-label="android "></md-icon>
</md-list-item>
</md-list>


needless to say, it doesn't work..
i wanna be able to call the apply() function to compile the md-list. Usually its supposed to load on page start but i dont really want that..can anyone help?

Answer

I could imagine that you are not correctly initializing your angular application at all. You need to either have an ng-app="App" attribute somewhere on your page (e.g. on the html body tag) for automatic initialization or you'll have to manually bootstrap your angular application.

More information on the initialization of angular applications (automatic or manual) can be found in the Angular Docs.


Version of apply(list) with manual initialization. Make sure to remove the ng-appattribute completely when using this

function apply(list){
  // define the angular module to be initialized
  angular
  .module('App', ['ngMaterial'])
  .controller('ListCtrl', function ($scope, $mdDialog) {
    $scope.people = list;
    $scope.goToPerson = function(person, event) {
      $mdDialog.show();
      $mdDialog.alert()
      .title('Navigating')
      .textContent('Inspect ' + person)
      .ariaLabel('Person inspect demo')
      .ok('Neat!')
      .targetEvent(event);
    };
  });
  // initialize the angular module (this will render the list in the end)
  angular.element(document).ready(function() {
    angular.bootstrap(document, ['App']);
  });
}
Comments