TypeError: i.match is not a function

Question

I have been working on a drupal angularjs module. I have installed bootstrap ui, which is working fine. But when I use modal box it does not work.

The code inside the controller:

    $scope.alertOnEventClick = function( event, allDay, jsEvent, view ){
    $scope.alertMessage = (event.title + ' was clicked ');
    console.log($modal);

    var modalInstance = $modal.open({
        //templateUrl: Drupal.settings.angularjsApp.basePath + '/ng_node/calender/popup',
        template: "<div class='modal-header'><h3 class='modal-title'>I'm a modal!</h3>" +
            "</div><div class='modal-body'><ul><li>jfksdfhjksd</li><li>jfksdfhjksd</li><li>jfksdfhjksd</li></ul></div>"+
            "<div class='modal-footer'><button class='btn btn-primary'>OK</button>" +
            "<button class='btn btn-warning'>Cancel</button></div>",
        controller: ModalInstanceCtrl,
        scope: $scope
    });



    function ModalInstanceCtrl($scope, $modalInstance) {
     console.log("controller class called")
     };

I am still facing issues with bootstrap ui popup model.

Answer 1

I too faced this problem earlier. With further investigation I could understand that as per angular guidelines, the isolated scope can only have the attributes of the custom directives. It throws error if we try to create a new scope value which doesn't matches with any of the attribute.

myModule.directive('directiveName', function factory() {
  return {
    ...
    scope: {
      'attrName': '@', // OK
      'attrName2': '=localName', // OK
      'attrName3': '<?localName', // OK
      'attrName4': ' = name', // OK
      'attrName5': 'name',    // ERROR: missing mode @&=
      'attrName6': 'name=',   // ERROR: must be prefixed with @&=
      'attrName7': '=name?',  // ERROR: ? must come directly after the mode
    }
    ...
  }
});

Answer 2

The scope: $scope doesn't look right to me. I just worked through a similar nondescript angular issue where I got "TypeError: a.match is not a function" by doing

    app.directive('contactAssociation', function () {
    return {
        templateUrl: 'contactAssociation.html',
        restrict: 'E',
        scope: {
            contact:"=",
            isSelected : false
        },
        controller: contactAssociationController
    };

By merely changing the scope assignment in the directive definition to this:

    app.directive('contactAssociation', function () {
    return {
        templateUrl: 'contactAssociation.html',
        restrict: 'E',
        scope: {
            contact:"=",
        },
        controller: contactAssociationController
    };

Everything started working again. It seems that angular throws some weird errors by doing improper scope assignment and doesn't adequately check for issues.

The following are the valid scope options for a directive definition.

scope: true //inherit parent scope

scope: false //use parent scope

scope: {} //isolated