ng-click不会在mdDialog中调用函数

Question

I am a little new to AngularJS but I cannot figure out why the ng-click here will not call th addingSt() function, I wonder if it has something to do with the fact that it is being called from a mdDialog. Thanks for your help.

Heres my html for the mdDialog:

<md-dialog aria-label="Send Email">
  <md-dialog-content>
<h3>Issue Details</h3>
<h4>Description</h4>
     <md-input-container>
    <label>Add description:</label>
 <textarea class="form-control input-lg" style="width: 500px; height:100px;"></textarea>
     </md-input-container>
 <h3>Sub-tasks:</h3>
<md-list-item ng-repeat=" subtask in subtasks">
  <p>{{subtask.content}}</p>
  <md-checkbox aria-label="blarg" class="md-secondary" style="padding-right:60px;" ng-click="removeSubTask(subtask,$index)"></md-checkbox>
  <md-list-item  ng-if="addingTask === true"> <input ng-if="addingTask===true" ng-model="task.content" aria-label="blarg" placeholder="Add Subtask Here"></input>
  </md-dialog-content>
  <md-dialog-actions>
    <md-button ng-show="addingTask === false" ng-click="addingSt()"  class="btn btn-primary">
      Add Sub-Task
    </md-button>
    <md-button ng-show="addingTask === true" ng-click="addingSt()"  class="btn btn-primary">
  cancel
</md-button>
<md-button ng-show="addingTask === true" ng-click="addSubTask()"  class="btn btn-primary">
  Submit
</md-button>
<md-button ng-click="closeDialog()"  class="btn btn-primary">
  Close
</md-button>

Here's the controller for the parent of the above mdDialog, (the controller for the mdDialog is nested inside it and works fine for all functions accept the addingSt() function)

var app  = angular.module('epr')
app.controller('adminMainCtr',[ '$scope','$mdDialog',function($scope, $mdDialog) {

  $scope.issues = [
    { name: 'Blizzard', img: 'img/100-0.jpeg', WardMessage: true, index:0, subtasks:[{content:"Shovel Sister Pensioner's Driveway "},
    {content:"Clear downed trees at the Bush's home "}]},
{ name: 'Tornado', img: 'img/100-1.jpeg', WardMessage: false, index:1, subtasks:[{content:"",index:0}] },
{ name: 'Peterson Family Car Crash', img: 'img/100-2.jpeg', WardMessage: false, index:2, subtasks:[{content:"",index:0}] },
{ name: 'Flood', img: 'img/100-2.jpeg', WardMessage: false, index:3, subtasks:[{content:"",index:0}] },
{ name: 'School Shooting', img: 'img/100-2.jpeg', WardMessage: false, index:4, subtasks:[{content:"",index:0}] }
  ];
  $scope.goToIssue = function(issue, event) {
 var parentEl = angular.element(document.body);
$mdDialog.show({
  //parent: parentEl,
  templateUrl:'views/issue.html',
  locals: {
    items: $scope.items,
    issue: issue
  },
  controller: DialogController
});
 function DialogController($scope, $mdDialog) {
   $scope.subtasks = issue.subtasks;
   $scope.addingTask = false;
   $scope.task={content:""};
   $scope.closeDialog = function() {
     console.log($scope.addingTask);
     $mdDialog.hide();
   }
   $scope.removeSubTask = function(subtask,index){
        $scope.subtasks.splice(index,1);
      }
   }
   $scope.addSubTask = function() {
      console.log("here");
   }
   $scope.addingSt = function() {
     if($scope.addingTask === false) {
       console.log($scope.addingTask);
       $scope.addingTask = true;
       return;
     }
     if($scope.addingTask === true) {
       $scope.addingTask = false;
       return;
     }
   }
  }
}]);

Any help that you can lend me would be very appreciated!!!

Answer 1

You messed with the HTML and angylar code. Errors found:

1) angular module initialization.

 var app = angular.module('MyApp', ['ngMaterial'])

2) You placed some function outside the DialogController

3) md-list-item HTML has no end tags.

Created working Plunkr here. https://plnkr.co/edit/Sl1WzLMCd8sW34Agj6g0?p=preview . Hope it will solve your problem.

(function() {
  'use strict';

   var app = angular.module('MyApp', ['ngMaterial'])
  app.controller('adminMainCtr', ['$scope', '$mdDialog', function($scope,    $mdDialog) {

$scope.issues = [{
  name: 'Blizzard',
  img: 'img/100-0.jpeg',
  WardMessage: true,
  index: 0,
  subtasks: [{
    content: "Shovel Sister Pensioner's Driveway "
  }, {
    content: "Clear downed trees at the Bush's home "
  }]
}, {
  name: 'Tornado',
  img: 'img/100-1.jpeg',
  WardMessage: false,
  index: 1,
  subtasks: [{
    content: "",
    index: 0
  }]
}, {
  name: 'Peterson Family Car Crash',
  img: 'img/100-2.jpeg',
  WardMessage: false,
  index: 2,
  subtasks: [{
    content: "",
    index: 0
  }]
}, {
  name: 'Flood',
  img: 'img/100-2.jpeg',
  WardMessage: false,
  index: 3,
  subtasks: [{
    content: "",
    index: 0
  }]
}, {
  name: 'School Shooting',
  img: 'img/100-2.jpeg',
  WardMessage: false,
  index: 4,
  subtasks: [{
    content: "",
    index: 0
  }]
}];
$scope.goToIssue = function(issue, event) {
  var parentEl = angular.element(document.body);
  $mdDialog.show({
    templateUrl: 'mddialog.html',
    locals: {
      message: {
        items: $scope.items,
        issue: issue
      }
    },
    controller: DialogController
  });
}

function DialogController($scope, $mdDialog, message) {
  console.log(message)
    //$scope.subtasks = message.issue.subtasks;
  $scope.addingTask = false;
  $scope.task = {
    content: ""
  };
  $scope.closeDialog = function() {
    console.log($scope.addingTask);
    $mdDialog.hide();
  }
  $scope.removeSubTask = function(subtask, index) {
    $scope.subtasks.splice(index, 1);
  }
  $scope.addSubTask = function() {
    console.log("here");
  }
  $scope.addingSt = function() {
    if ($scope.addingTask === false) {
      console.log($scope.addingTask);
      $scope.addingTask = true;
      return;
    }
    if ($scope.addingTask === true) {
      $scope.addingTask = false;
      return;
    }
  }
}

  }]);
})();