javascript - 在我的例子中如何将数据从指令传递到父范围？

Question

我对指令和 Controller 有疑问。

在我的例子中，我想将数据从指令传递到 Controller 。

模板html

<img ng-src=“{{url}}” image-detect />

<div>width: {{width of image}}</div>  // how do I show the value here
<div>height: {{height of image}}</div>

指令

(function () {
     angular
        .module(‘myApp’)
        .directive(‘imageDetect’, imageDetect);

    function imageDetect() {
        var directive = {
            'restrict': 'A',       
            'controller': imageController
        };

        return directive;
    }

    function imageController($scope, $element) {
        $element.on('load', function() {
            $scope.imageWidth = $(this).width();
            $scope.imageHeight = $(this).height();

           //not sure what to do to pass the width and height I calculate in directive to the parent
        });
    }
   })();

如何将 imageWidth 和 imageHeight 传递给父范围并在模板中显示？非常感谢!

Answer 1

我想到了两种方法:

1. 您可以在基础/父级/任何范围内声明一个类似于 imageDimention 的对象，然后通过范围隔离将其与指令共享，然后您可以从指令的 Controller 范围访问该 imageDimention 对象并设置其 imageWidth 和 imageHeight 属性。在指令中设置这些属性也会在基/父/任何范围内生效:

范围隔离示例，复制自 angular documentation

angular
    .module('yourapp')
    .directive('myImage', function() {
      return {
        restrict: 'E',
        scope: {
          imageDimention: '=imageDimention'
        },
        controller: 'ImageController'
      };
    });

然后在 ImageController 的范围内，您可以访问相同的 imageDimention 对象

1. 创建一个 ContextService，它可用于在不同的 Angular 组件之间共享数据，而不仅仅是这些图像属性。有一个有点通用的 ContextService 是件好事，这样它就可以被重用/通用。

ContextService 可以是这样的:

angular.module('yourapp')
        .factory('ContextService', ContextService);
    function ContextService() {
        var service = {};
        var data = {};
        service.set = set;
        service.get = get;


        function set(key, value) {

            if(key !== null && key !== undefined){
                data[key] = value;
            }

        }

        function get(key) {
            return data[key];
        }

        return service;
    }

然后您可以将此服务注入(inject)到您的 Angular 组件( Controller /指令/其他服务)中并将其作为某种全局对象访问，因为服务是单例的，这将为您提供数据共享模块。

在你的情况下，你可能有一个附加到 View 的 Controller ，所以假设你有那个 Controller ，应该在这个 Controller 范围内声明一个对象 say image:

$scope.image = {
    url: 'imageUrl'
    width: '0px',
    height: '0px',
}

那么你的 html 模板应该是这样的:

<img ng-src="{{image.url}}" image-detect />

<div>width: {{image.width}}</div>
<div>height: {{image.height}}</div>

你的指令应该是这样的:

(function () {
     angular
        .module(‘myApp’)
        .directive(‘imageDetect’, imageDetect);

    function imageDetect() {
        var directive = {
            'restrict': 'A',
            'scope': {
                'image': '=image'
            },
            'controller': imageController
        };

        return directive;
    }

    function imageController($scope, $element) {
        $element.on('load', function() {
            //here you can access image object from scope which is same as controller that is attached to the view
            $scope.image.width = $(this).width();
            $scope.image.height = $(this).height();
        });
    }
   })();

我希望这可能对您有所帮助...