CODEWITHSUNDEEP
javascriptangularjs
nanndoj
nanndoj

Reputation: 6770

Access isolated scope from directive content?

Is there a way to access the isolated scope from directive's DOM Children? I have the following definition:

    var $app = angular.module('MyApp',[]);
    $app.directive('crnDatasource',[function() {
      return {
        restrict: 'A',
        controller: 'CrnFormController',
        scope: {
            crnDatasource : '@'
        }
      };
    }])

    .controller("CrnFormController",['$scope', function($scope) {
        $scope.newValue = $scope.crnDatasource + 'anything';
        $scope.itDoesntWork = function() {
          alert($scope.crnDatasource);
        }

    }]);

But I have to access the scope in this way

 <form crn-datasource="People">
      {{newValue}}
      <button ng-click="itDoesntWork()"></button>
 </form>

What should be done to access the the scope in the diretive content?

Upvotes: 1

Views: 35

Answers (1)

dfsq
dfsq

Reputation: 193261

Since you put directive on the node with inner content, you need to either transclude it or not to use isolated scope. The second is simpler:

$app.directive('crnDatasource', [function() {
    return {
        restrict: 'A',
        controller: 'CrnFormController',
        link: function(scope, element, attrs) {
            console.log('1');
            scope.crnDatasource = attrs.crnDatasource;
            scope.newValue = scope.crnDatasource + 'anything';
        }
    };
}]);

Demo: http://plnkr.co/edit/UEfOQa1g8L7rYSH5CBL6?p=preview

Upvotes: 1

Related Questions