angular4图像注释 - 从angular1到angular4转换问题和1.x到4的Equalents的图像注释

Question

使用我的下面的angular1.x脚本代码进行图像注释我已经搜索了一个解决方案来解决我的转换错误，但是我没有在angular4中得到很多angular1.x代码。当我尝试转换为Angular4时，错误是angular1.x的运行时错误。见下文。

对于$inject我使用@inject，但在我的代码中使用它来将角度1.x图像注释转换为angular4图像注释非常困难。

＆＃13;

＆＃13;

Image annoation in angular1.x
------------------------------
  annotoriousAnnotateDirective.$inject = ['annotoriousService', 'setTimeout()'];
            annotoriousAnnotateDirective(annotoriousService, setTimeout(()=> {
                    service = {
                    restrict: 'A',
                    link: annotateLink,
                    priority: 100 
                },
                return service;
        
                link.$inject = ['$scope', '$element', '$attributes'];
                annotateLink($scope, $element, $attributes)=> {
                    if ($attributes.src) {
                        annotoriousService.makeAnnotatable($element[0]);
                    } else {
                        $element.bind('load', function () {
                            $scope.$apply(function () {
                                annotoriousService.makeAnnotatable($element[0]);
                            });
                        });
                    }
                }
            }, 200);
        
            annotoriousDirective.$inject = ['$compile', '$rootScope', '$http', '$parse', '$timeout', 'annotoriousService'];
            annotoriousDirective($compile, $rootScope, $http, $parse, $timeout, annotoriousService)=> {
                let service = {
                    restrict: 'E',
                    scope: {
                        open: '=',
                        options: '=',
                        
                        onOpen: '&',
                        onLoad: '&',
                        onComplete: '&',
                        onCleanup: '&',
                        onClosed: '&'
        
                    },
                    require: 'annotorious',
                    link: link,
                    controller: controller,
                    controllerAs: 'vm'
                };
                return service;
                
                controller.$inject = ['$scope'];
                controller($scope) {
        
                }
        
                link.$inject = ['$scope', '$element', '$attributes'];
                function link($scope, $element, $attributes, controller) {
                    var cb = null;
        
                    $scope.$watch('open', function (newValue, oldValue) {
                        //console.log("watch $scope.open(" + $scope.open + ") " + oldValue + "->" + newValue);
                        if (oldValue !== newValue) {
                            updateOpen(newValue);
                        }
                    });
        
                    $scope.$on('$destroy', function () {
                        $element.remove();
                    });
        
                    init();
        
                    updateOpen(newValue) {
                        if (newValue) {
                            init(newValue);
                        } else {
                            if (options.annotationsFor) {
                            let annotatables = $(options.annotationsFor);
                                annotatables.each(function (idx) {
                                    let item = this;
                                    annotoriousService.makeAnnotatable(item);
                                });
                            }
                        }
                    }
        
                    init(open) {
                        let options = {
                            //href: $attributes.src,
                            annotationsFor: $attributes.annotationsFor,
                            onOpen() {
                                if (this.onOpen && this.onOpen()) {
                                    this.onOpen()();
                                }
                            },
                            onLoad() {
                                if (this.onLoad && this.onLoad()) {
                                    this.onLoad()();
                                }
                            },
                            onComplete() {
                                onComplete();
                                if (this.onComplete && this.onComplete()) {
                                    this.onComplete()();
                                }
                            },
                            onCleanup() {
                                if (this.onCleanup && this.onCleanup()) {
                                    this.onCleanup()();
                                }
                            },
                            onClosed() {
                                $scope.$apply(function () {
                                    $scope.open = false;
                                });
                                if ($scope.onClosed && $scope.onClosed()) {
                                    $scope.onClosed()();
                                }
        
        
                            }
                        };
                        if (options) {
                            Object.assign(options, this.options);
                        }
                            for (let key in options) {
                            if (options.hasOwnProperty(key)) {
                                if (typeof(options[key]) === 'undefined') {
                                    delete options[key];
                                }
                            }
                        }
        
                        if (typeof(open) !== 'undefined') {
                            options.open = open;
                        }
        
                       $timeout(function () {
        
                             if (options.annotationsFor) {
                                $(options.annotationsFor).each(function (i) {
                                    var itemToAnnotate = this;
                                    annotoriousService.makeAnnotatable(itemToAnnotate);
                                });
                            }
                        }, 0);
                    }

＆＃13;

＆＃13;

＆＃13;

我的错误代码：

Answer 1

我在angular4中找到了@Inject的等价，

import { Inject } from '@angular/core';
import { ourservice } from 'servicepath';
export class{
constructor(@Inject(Ourservice / Directive/ etc) private ourservice){
  //our functionality

} }

  

如果有任何更正请告诉我，我仍然在寻找angular4中图像注释的解决方案