ng-click 不调用 mdDialog 中的函数

Question

我对 AngularJS 有点陌生，但我不明白为什么这里的 ng-click 不会调用 addingSt() 函数，我想知道这是否与它是从 mdDialog 调用。谢谢你的帮助。

这是我的 html 的 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>

这是上述 mdDialog 的父级控制器，（mdDialog 的控制器嵌套在其中，并且适用于接受 addingSt() 函数的所有函数）

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;
     }
   }
  }
}]);

如果您能给我任何帮助，我们将不胜感激！！！

Answer 1

你弄乱了 HTML 和 angylar 代码。发现错误：

1) angular 模块初始化。

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

2) 您在 DialogController 之外放置了一些函数

3) md-list-item HTML 没有结束标签。

在此处创建了可用的 Plunkr。 https://plnkr.co/edit/Sl1WzLMCd8sW34Agj6g0?p=preview。希望能解决你的问题。

(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;
    }
  }
}

  }]);
})();

ng-click 不调用 mdDialog 中的函数

ng-click does not call function in mdDialog

angularjs

angularjs-ng-click

angular-material

mddialog