{"id":2179,"date":"2017-07-22T22:52:40","date_gmt":"2017-07-22T22:52:40","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=2179"},"modified":"2018-10-10T17:15:56","modified_gmt":"2018-10-10T17:15:56","slug":"angularjs-controller-lifecycle-and-using-scope-lifecycle-hooks","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=2179","title":{"rendered":"AngularJS – Controller Lifecycle and using $scope lifecycle hooks"},"content":{"rendered":"

This post here<\/a> answers a basic question I had as to what is the AngularJS controller lifecycle.<\/p>\n

The post links to a plnker<\/a> which demonstrates some of the lifecycle hooks \u2013 $viewContentLoaded and $destroy.<\/p>\n

These posts relate to the events used\/hooked in the example \u2013 but more digging is needed to expand on this area:<\/p>\n

https:\/\/docs.angularjs.org\/api\/ngRoute\/directive\/ngView<\/a><\/p>\n

https:\/\/stackoverflow.com\/questions\/28800426\/what-is-on-in-angularjs<\/a><\/p>\n

https:\/\/docs.angularjs.org\/api\/ng\/type\/$rootScope.Scope<\/a><\/p>\n

Unfortunately my first attempt at trying this in an angularjs-up-and-running example failed with $scope being undefined.<\/p>\n

I initially used this code pattern to pass $scope into the controller:<\/p>\n

\n
angular.module('notesApp', [])

  .controller('SubCtrl', [function($scope) {

      console.log('SubCtrl has been constructed');
      $scope.$on('$viewContentLoaded', function() {
          console.log('SubCtrl has loaded');
      });
      $scope.$on('$destroy', function() {
          console.log('SubCtrl is no longer necessary');
      })

    var self = this;
    self.list = [
      {id: 1, label: 'Item 0'},
      {id: 2, label: 'Item 1'}
    ];

    self.add = function() {
      self.list.push({
        id: self.list.length + 1,
        label: 'Item ' + self.list.length
      });
    };
  }]);
<\/pre>\n<\/blockquote>\n
The problem above is that the controller function is passed as an array (to avoid problems during minification) and so $scope has to be passed differently as per this post here<\/a>.<\/p>\n
\n
angular.module('notesApp', [])
   .controller('SubCtrl', ['$scope', function(scope) {

      console.log('SubCtrl has been constructed');
      scope.$on('$viewContentLoaded', function() {
          console.log('SubCtrl has loaded');
      });
      scope.$on('$destroy', function() {
          console.log('SubCtrl is no longer necessary');
      })

    var self = this;
    self.list = [
      {id: 1, label: 'Item 0'},
      {id: 2, label: 'Item 1'}
    ];

    self.add = function() {
      self.list.push({
        id: self.list.length + 1,
        label: 'Item ' + self.list.length
      });
    };
  }]);
<\/pre>\n<\/blockquote>\n
The complete working example follows:<\/p>\n
app.js<\/u><\/strong><\/p>\n
\n
\/\/ File: chapter5\/need-for-service\/app.js
angular.module('notesApp', [])
  .controller('MainCtrl', [function() {
    var self = this;
    self.tab = 'first';
    self.open = function(tab) {
      self.tab = tab;
    };
  }])
  .controller('SubCtrl', ['$scope', function(scope) {

      console.log('SubCtrl has been constructed');
      scope.$on('$viewContentLoaded', function() {
          console.log('SubCtrl has loaded');
      });
      scope.$on('$destroy', function() {
          console.log('SubCtrl is no longer necessary');
      })

    var self = this;
    self.list = [
      {id: 1, label: 'Item 0'},
      {id: 2, label: 'Item 1'}
    ];

    self.add = function() {
      self.list.push({
        id: self.list.length + 1,
        label: 'Item ' + self.list.length
      });
    };
  }]);
<\/pre>\n<\/blockquote>\n
index.html<\/u><\/strong><\/p>\n
\n
<!-- File: chapter5\/need-for-service\/index.html -->
<html ng-app="notesApp">

<head>
  <script
    src="https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.11\/angular.js">
  <\/script>
  <script src="app.js"><\/script>
<\/head>

<body ng-controller="MainCtrl as mainCtrl">
  <h1>Hello Controllers!<\/h1>
  <button ng-click="mainCtrl.open('first')">Open First<\/button>
  <button ng-click="mainCtrl.open('second')">Open Second<\/button>
  <div ng-switch on="mainCtrl.tab">

    <div ng-switch-when="first">
      <div ng-controller="SubCtrl as ctrl">
        <h3>First tab<\/h3>
        <ul>
          <li ng-repeat="item in ctrl.list">
            <span ng-bind="item.label"><\/span>
          <\/li>
        <\/ul>

        <button ng-click="ctrl.add()">Add More Items<\/button>
      <\/div>

    <\/div>
    <div ng-switch-when="second">
      <div ng-controller="SubCtrl as ctrl">
        <h3>Second tab<\/h3>
        <ul>
          <li ng-repeat="item in ctrl.list">
            <span ng-bind="item.label"><\/span>
          <\/li>
        <\/ul>

        <button ng-click="ctrl.add()">Add More Items<\/button>
      <\/div>
    <\/div>
  <\/div>
<\/body>

<\/html>
<\/pre>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
This post here answers a basic question I had as to what is the AngularJS controller lifecycle. The post links to a plnker which demonstrates some of the lifecycle hooks \u2013 $viewContentLoaded and $destroy. These posts relate to the events used\/hooked in the example \u2013 but more digging is needed to expand on this area: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[211],"tags":[16,15],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2179"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2179"}],"version-history":[{"count":2,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2179\/revisions"}],"predecessor-version":[{"id":2181,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2179\/revisions\/2181"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}