mcgraths
4/14/2014 - 2:59 AM

AngularJS, Chrome Extensions, and CSP issues (ngClick, ngKeypress, etc.)

AngularJS, Chrome Extensions, and CSP issues (ngClick, ngKeypress, etc.)

This bit of code doesn't work:
 
<div ng-controller="MainCtrl" ng-csp>
  <input type="text" ng-click="clickFunction()">
</div>
 
function MainCtrl($scope) {
  $scope.clickFunction = function(event) { console.log(event); }
}
 
I think it has to do with ng-csp and this not allowing you to execute JS on the main page of a chrome extension.
 
This blocks me from using ALL angular directives with an eval (ng-click, ng-keypress, etc.)
 
My "hacky" workaround:
 
<input type="text" ng-enter> with:
 
app.directive('ngEnter', function($rootScope) {
  return {
    link: function(scope, element, attrs) {
      element.bind("keypress", function(e){
	// logic
        $rootScope.$broadcast(ENTER_RECIEVED, true);
      }
  }
});