AngularJS broadcasting

Question

I have a refresh function that needs to be broadcast to child controllers. I made something like this in the parent controller:

      // Refresh/Cancel
  $scope.OnGridBODRefresh() = {
        function () {
         $scope.$broadcast('refresh',$scope.dtBODStartValue,$scope.dtBODStopValue);                                  
        }          
        } 

and in child controller:

      // Refresh/Cancel
  $scope.OnGridBODRefresh = function () {        
    // Filter setzen
    kendoHelper.SetDataSourceFilters($scope.gridBODProductionRequests.dataSource, "BODTime", "gte", $scope.dtBODStartValue);    // gte Kendo Operator
    kendoHelper.SetDataSourceFilters($scope.gridBODProductionRequests.dataSource, "BODTime", "lte", $scope.dtBODStopValue);       // lte Kendo Operator
  }
   
  $scope.dtChildStopValue = new Date();
  $scope.dtChildStartValue = new Date($scope.dtChildStopValue - 7 * TIMEINTERVAL_PER_DAY_MS);
     
      $scope.$on('refresh', function (event, dtBODStartValue, dtBODStopValue) {
           $scope.dtChildStartValue = dtBODStartValue;
           $scope.dtChildStopValue = dtBODStopValue;
         }
         )         

It should be activated on button "Cancel". I have an error:

"$scope.OnGridBODRefresh is not a function"

in console. Does anyone know this?

Here is the link between my controller and view:

<table border="0" class="navigationBar">
    <tr>
        <td class="navigationBar-left">
            ({{refreshcount}})
            <kendo-button class="k-primary button button-save" ng-click="OnGridBODSave()">Save</kendo-button>
            <kendo-button class="k-primary button button-cancel" ng-click="OnGridBODRefresh()">Cancel</kendo-button>
        </td>
        <td class="navigationBar-right">
            @PLanguageTexts.TXT_AUTO_REFRESH:  <input type="checkbox" name="checkBoxAutomaticRefresh" ng-model="checkBoxAutomaticRefreshValue" ng-true-value="1" ng-false-value="0" ng-change="OnCheckBoxAutomaticRefreshChange(e)">
            | 
            @PLanguageTexts.TXT_BOD_TIME
          <input kendo-date-time-picker="dateTimePickerBODStart" k-ng-model="dtBODStartValue" k-options="dateTimePickerBODStart"/>
          <input kendo-date-time-picker="dateTimePickerBODStop" k-ng-model="dtBODStopValue" k-options="dateTimePickerBODStop"/>
        </td>
    </tr>
</table> 


 <div ng-controller="BODProductionRequestsCtrl">  
           <div kendo-grid="gridBODProductionRequests" k-options="gridBODProductionRequests(dataItem)">
              <div k-detail-template>
                <kendo-tabstrip>
                  <ul>
                      <li class="k-state-active">@PLanguageTexts.TXT_COMMENT</li>
                  </ul>
                  <div>
                    <textarea id="BODProductionRequestsComment" class="textarea-gridComment" ng-model="dataItem.Comment" ng-change="OnCommentChange(dataItem, gridBODProductionRequests)"></textarea>
                  </div>
                </kendo-tabstrip>
              </div>
        </div>
        {{dtChildStartValue}}
  </div>  

Answer 1

  // Refresh/Cancel
$scope.OnGridBODRefresh = function () {
        $scope.$broadcast('refresh',$scope.dtBODStartValue,$scope.dtBODStopValue);                                  
    }  

I don't get why you wrapped your function into an object. If you remove the brackets around your function it would work like charm.

The other issue is that your ng-click is not inside your div linked to the controller. Try to do it that way. If it doesn't work, there might also be an issue with kendo, where I would not be able to help.

 <div ng-controller="BODProductionRequestsCtrl">  
    <table border="0" class="navigationBar">
            <tr>
                <td class="navigationBar-left">
                    ({{refreshcount}})
                    <kendo-button class="k-primary button button-save" ng-click="OnGridBODSave()">Save</kendo-button>
                    <kendo-button class="k-primary button button-cancel" ng-click="OnGridBODRefresh()">Cancel</kendo-button>
                </td>
                <td class="navigationBar-right">
                    @PLanguageTexts.TXT_AUTO_REFRESH:  <input type="checkbox" name="checkBoxAutomaticRefresh" ng-model="checkBoxAutomaticRefreshValue" ng-true-value="1" ng-false-value="0" ng-change="OnCheckBoxAutomaticRefreshChange(e)">
                    | 
                    @PLanguageTexts.TXT_BOD_TIME
                  <input kendo-date-time-picker="dateTimePickerBODStart" k-ng-model="dtBODStartValue" k-options="dateTimePickerBODStart"/>
                  <input kendo-date-time-picker="dateTimePickerBODStop" k-ng-model="dtBODStopValue" k-options="dateTimePickerBODStop"/>
                </td>
            </tr>
        </table> 



                               <div kendo-grid="gridBODProductionRequests" k-options="gridBODProductionRequests(dataItem)">
                                      <div k-detail-template>
                                        <kendo-tabstrip>
                                          <ul>
                                              <li class="k-state-active">@PLanguageTexts.TXT_COMMENT</li>
                                          </ul>
                                          <div>
                                            <textarea id="BODProductionRequestsComment" class="textarea-gridComment" ng-model="dataItem.Comment" ng-change="OnCommentChange(dataItem, gridBODProductionRequests)"></textarea>
                                          </div>
                                        </kendo-tabstrip>
                                      </div>
                                </div>
                                {{dtChildStartValue}}
                          </div>