angularjs directive Argument 'fn' is not a function

Question

I am using angularjs and typescript where i am trying to create a directive as following:

Here is my controller :

 export const test1 = { template: require('./app.html'), controller($scope, $http) { $scope.hello = "hello app"; } }; 

I know how to create a directive using javascript, but how to do it using a const then import it.

Here is my directive in js:

export const myDirective = {
    directive() {
        return {
        restrict : "A",
        template : "<h1>Made by a directive!</h1>"
    };

    }
};

My View:

<div class="container">
<div class="row">
    <div ng-repeat="b in data">
       <div my-directive></div>

    </div>
</div>
<div>

I am trying to import it and use as:

import angular from 'angular';
import {ngAnimate} from 'angular-animate';
import {ngSanitize} from 'angular-sanitize';
import 'angular-ui-bootstrap';

import 'angular-ui-router';
import routesConfig from './routes';

import {hello} from './app/hello';
import {test1} from './test1/app';
import { myDirective} from './test1/directives'

import './index.scss';

export const app = 'app';

angular
  .module(app, ['ngAnimate', 'ngSanitize','ui.router', 'ui.bootstrap'])
  .config(routesConfig)
  .component('app', hello)
  .component('test1', test1)
  .directive('myDirective', myDirective ) ;

However i am getting this error:

Error: [ng:areq] Argument 'fn' is not a function, got Object

Answer 1

您应该注册directive功能而不是myDirective对象。

.directive('myDirective', myDirective.directive ) ;