• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

AngularJS function call in directive

N

ng-username

Neues Mitglied
Hallo,
ich habe eine Angular directive geschrieben und will in der direcitive eine FUnktion auf meinem Controller aufrufen.
Nur leider funktioniert das nicht, ich habe mal ein console.log in der zu callenden Funktion geschrieben und die Funktion wird nur beim rendern der directive aufgerufen.

Mein Controller:
Code: 
module.controller("MeinController", [
    function(/*dependencies*/){
    /*
     ...
    */

    self.isBreakEnabled = function(dayName){
        console.log("isBreakEnabled", dayName);
        if( !self.settings.reservationTimes ){
            return false;
        }
    
        var day = self.settings.reservationTimes[dayName];
        return day && day.hasBreak;
    }

}]);

Directive Definition:
Code: 
directives.directive("resTimeRow", function(){
    return {
        restrict: "A",
        templateUrl: "/partials/tr-res-time-row.html",
        scope: {
            dayName: "@dayName",
            dayNameShort: "@dayNameShort",
            dayModel: "=day",
            openingOptions: "=openingOptions",
            breakOptions: "=breakOptions",
            isBreakEnabled: "&isBreakEnabled"
        },
        link: function(scope, element, attrs){
        }
    };
});

Und der directive Code:
HTML: 
<td class="dayname">{{dayName}}</td>
<td>
  <select name="asf" id="d1" ng-model="day.from">
   <option ng-repeat="t in openingOptions" value="{{t}}">{{t}}</option>
  </select>
</td>
<td class="seperator">bis</td>
<td>
  <select name="asf" id="d1" ng-model="day.to">
    <option ng-repeat="t in openingOptions" value="{{t}}">{{t}}</option>
  </select>
</td>
<td class="seperator unit">Uhr</td>
<td>
   <input type="checkbox" name="hasBreak" class="has-break-checkbox" ng-model="day.hasBreak" />
</td>
<td>
  <select name="" id="d1" ng-disabled="!isBreakEnabled({dayName:dayNameShort})" ng-model="day.break.from">
    <option ng-repeat="t in breakOptions" value="{{t}}">{{t}}</option>
   </select>
</td>
<td class="seperator">bis</td>
<td>
  <select name="" id="d1" ng-disabled="!isBreakEnabled({dayName:dayNameShort})" ng-model="day.break.to">
    <option ng-repeat="t in breakOptions" value="{{t}}">{{t}}</option>
  </select>
</td>
<td class="seperator unit">Uhr</td>

Wenn ich jetzt die Ceckbox anklick die in dem Controller für den Tag hasBreak auf true setzt, sind die select Felder mit der ng-disabled Expression immer noch disabled.
Die Funktion isBreakEnabled in meinem Controller wird also nicht aufgerufen.
Wie kann ich also diese Funkion von meiner Directive aufrufen?
 
Werbung:
Ich vermute mal, es liegt daran, dass die Directive einen Child-Scope kreiert. Ich würde statt self.isBreakEnabled() mal $rootScope.isBreakEnabled() ausprobieren. Ansonsten vielleicht ein $watch() aus dem Controller oder ein $rootScope.$emit() aus der Directive.
 
Hast du ein var self = this; ?

Und hast du im HTML Code in dem du die Funktion aufrufst die Funktion auch übergeben?

sowas wie

Code: 
<div ng-controller="MeinController as vm">
<div resTimeRow isBreakEnabled="vm.isBreakEnabled(dayName)"></div>
</div>

Ansonsten mach mal ein plunkr oder jsfiddle mit dem Beispiel, damit man das konkrete Problem sieht...
 
Werbung:
Hat mich jetzt selber interessiert. Hier ein vereinfachtes Beispiel, wie sich eine Select-List aus dem Controller ansteuern und per Checkbox en-/disablen lässt. Die Directive darf keinen isolated Scope bilden, sonst klappt das nicht.

Code: 
<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="MyController">
      <my-directive></my-directive>
   </select>
    </div>
    <script>
      angular.module('myApp', [])
      .controller('MyController', ['$scope', function($scope){
        $scope.items = [{name: 'foo', value: 30 },{ name: 'bar', value: 27 },{ name: 'baz', value: 50 }];
        $scope.selectedOption = $scope.items[0];
      }])
      .directive('myDirective', function() {
        return {
          restrict: 'E',
          template: '<input type="checkbox" ng-model="checkboxValue" ng-true-value="true" ng-false-value="false" ng-init="checkboxValue = true"><br><select ng-disabled="checkboxValue" ng-model="selectedOption" ng-options="item.name for item in items"> </select>'
        };
      });
    </script>
  </body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben