My goal is to create a directive that allows me to pass in an attribute string, which will then be used as the "name" parameter when subscribing to events using $scope.$on. The process involves:
- An object is broadcasted using $rootScope.$broadcast, labeled as 'validationResultMessage', in a different controller.
- I have a directive with an attribute named "subscription" where I pass the string 'validationResultMessage'.
- The directive passes the value of the "subscription" attribute to its scope and subscribes to it using "$scope.$on".
The issue I'm facing is that the value of the attribute seems to be "undefined" during evaluation, causing me to inadvertently subscribe to "undefined" instead of "validationResultMessage".
Below is the directive I've created:
app.directive('detailPane', function () {
return {
restrict: 'E',
scope: {
selectedItem: '=',
subscription: '@',
},
templateUrl: 'app/templates/DetailPane.html', //I'm also concerned that this might be causing my controller to be instantiated twice
controller: 'DetailPaneController'
};
});
Here is how I use the directive:
<td class="sidebar" ng-controller="DetailPaneController" ng-style="{ 'display': sidebarDisplay }">
<detail-pane
selected-item='validationResult'
subscription='validationResultMessage'/>
</td>
And here is the controller where I'm trying to utilize this attribute:
app.controller('DetailPaneController', ['$scope', '$http', 'dataService', 'toastr', '$uibModal', '$rootScope', '$attrs', function ($scope, $http, dataService, toastr, $uibModal, $rootScope, $attrs) {
$scope.fetching = [];
$scope.validationResult = null;
$scope.sidebarDisplay = 'block';
console.log('subscription is ', $scope.subscription);
var thisSubscription = $scope.subscription;
//if I hardcode the param as 'validationResultMessage', this works
$scope.$on($scope.subscription, function (event, arg) {
$scope.validationResult = arg;
});
}]);