Question

我在控制器中有一个函数，我想通过单击按钮（指令中的按钮）从指令调用。我在按钮上有一个x <- 1:50 y <- c(1,2) z <- c(seq(10,50,10)) for(i in 0:(length(z)-1)) { out <- append(x, y, after=(z[i+1]+i)) } out，它有一个应该调用控制器功能的函数。但是传递给控制器的值是未定义的。我究竟做错了什么？我在代码中添加了注释以帮助理解

这是指令：

ng-click

该指令的html与ebApp.directive('monthDir', function () { return { restrict: 'E', templateUrl: 'htmlFiles/monthDirective.html', transclude: true, scope: { ebObj: "=obj", onCl : "&" //bind function //countArraysc: "=countObj" }, link: function (scope, element, attrs) { scope.removeDir = function (removeVal) { //directive's ng-click to call controller function console.log(removeVal); //shows value here but undefined in controller scope.onCl(removeVal); //calling controller function } }, controller: function ($scope) { console.log($scope); } } })应该调用函数调用控制器函数：

ng-click

使用该指令的html：

div class="row monthDirC">
<div class="form-group">
    <span class="glyphicon glyphicon-remove-sign pull-right cursorC"  
          ng-click="removeDir(ebObj.costArray[count])"></span> 
    <label for="datepick" class="col-md-6">Select month</label>

控制器功能：

<month-dir  ng-repeat="count in countArray" on-cl="removeDirCtrl(removeVal)" obj="ebObj.costArray[count]">
            <ng-transclude></ng-transclude>
        </month-dir>

Answer 1

如果您只想在function中拨打controller，则不必使directive复杂化

＆＃13;

var app = angular.module('app', []);
app.controller('customctrl', function($scope) {
  $scope.callMe = function(name) {
    alert('Hey ' + name + '! the time now is ' + new Date());
  }
});
app.directive('monthDir', function() {
  return {
    restrict: 'E',
    template: `<input type="text" placeholder="what is your name?" data-ng-model="name"></input>
    <br/><hr />
    <input type="button" value="what is the time ?"  data-ng-click="callMe(name)"></input>`,
    link: function(scope, element, attrs) {
      scope.name = 'there';
    },
    controller: 'customctrl' //the pre-defined controller name
  }
});

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller='customctrl'>
  <month-dir></month-dir>
</body>

</html>

＆＃13;

Answer 2

更改调用控制器的指令代码如下：

<button class="btn btn-default" onclick="dialog.open()">Reopen</button>
<div id="dialog" class="card">
     <div class="card-block">
       <form class="row" style="width:100%;">
        <div class="col-6">
            <label for="name" class="control-label">name</label>
            <div>
                <input class="form-control"
                       style="height:30px;width:200px;" id="name" />
            </div>
        </div>
        <div class="col-6">
            <label for="description" class="control-label">Description</label>
            <div>
                <input class="form-control"
                       style="height:30px;width:250px;" id="description" />
            </div>
        </div> 
       </form>           
     </div>
  </div>

关注传递给回调 scope.onCl 的参数是 {removeVal：removeVal}

传递给Function的值绑定到指令是未定义的

2 个答案: