2017-07-18 1 views
-1

Ich habe eine Funktion in der Steuerung, die ich von der Direktive auf einen Klick (Schaltfläche in der Direktive) aufrufen möchte. Ich habe eine ng-click auf der Schaltfläche mit einer Funktion, die die Controller-Funktion aufrufen soll. Der an den Controller übergebene Wert ist jedoch nicht definiert. Was mache ich falsch? Ich habe hinzugefügt Kommentare in Code zu helfenWert an Funktion übergeben, die an Direktive gebunden ist, ist undefined

zu verstehen Dies ist die Richtlinie:

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

Die html der Richtlinie mit dem ng-click die angeblich Funktion aufrufen, die Controller-Funktion aufrufen soll:

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> 

Der hTML-Code, die Richtlinie verwendet:

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

Die Reglerfunktion:

$scope.removeDirCtrl = function (removeVal) { // function to be called from directive 
    console.log("ctrlRemove"); 
    console.log(removeVal); //undefined 
} 
+0

Ändern der Richtlinie Code-Controller für den Aufruf wie folgt: scope.removeDir = function (removeVal) {// Richtlinie des ng -Klick zum Aufruf der Controller-Funktion console.log (removeVal); // zeigt Wert hier, aber undefiniert in Controller scope.onCl ({removeVal: removeVal}); // Aufruf der Controller-Funktion } – Harpreet

+0

@Harpreet. Ich kann nicht lesen. kannst du bitte als antwort posten? – Abhi

Antwort

0

Ändern Sie die Richtlinie erschweren Code zum Aufruf des Controllers wie folgt:

scope.removeDir = function (removeVal) { 
    console.log(removeVal); 
    scope.onCl({removeVal: removeVal}); 
} 

Fokus im Argument übergeben scope.onCl ist Rückruf {removeVal: removeVal}

0

wenn Sie einfach eine function in einem controller anrufen möchten Sie haben nicht die directive so viel

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

Verwandte Themen