angularjs指令Argument' fn'不是一个功能

时间:2017-05-29 23:59:39

标签: javascript angularjs typescript directive

我正在使用angularjs和typescript,我正在尝试创建一个如下指令:

这是我的控制器:



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

    }
};




我知道如何使用javascript创建指令,但如何使用const然后导入它。

这是我在js中的指令:

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

    }
};

我的观点:

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

    </div>
</div>
<div>

我正在尝试导入它并用作:

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 ) ;

但是我收到了这个错误:

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

1 个答案:

答案 0 :(得分:0)

您应该注册myDirective函数而不是.directive('myDirective', myDirective.directive ) ; 对象。

{
  "Cars": [
    {
      "Engine": { "Type": "V8", "Displacement": 4.8 },
      "Body": { "Style": "Targa", "Color": "White" },
      "Drivers": [
        {
          "Name": { "First": "Bob", "Last": "Fast" },
          "Address": { "Street": "Top Ct", "City": "Seattle" },
          "Contact": { "Phone": "(000) 000-0000", "Email": "bob@email.me" }
        }
      ],
      "Trips": [
        {
      "Note" : "Trip F",
          "Mileage": { "Start": 1000, "End": 2000 },
          "Period": { "Start": "2017-12-01T00:00:00", "End": "2017-12-02T00:00:00" },
          "Cargo": [
            {
              "Size": { "Height": 100, "Wight": 200, "Lenght": 300 },
              "Info": { "Weight": 400, "Name": "Cargo Name F1"}
            },
            {
              "Size": { "Height": 500, "Wight": 600, "Lenght": 700 },
              "Info": { "Weight": 800, "Name": "Cargo Name F2"}
            },
            {
              "Size": { "Height": 900, "Wight": 1000, "Lenght": 1100 },
              "Info": { "Weight": 1200, "Name": "Cargo Name F3"}
            }
          ]
    }
      ]
    }
  ]
}