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

Question

我对指令和控制器有疑问。

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

模板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

我想到了两种方法：

您可以在 base/parent/whatever 范围内声明一个类似于 imageDimention 的对象，然后通过范围隔离将其与指令共享，然后您可以从指令的控制器范围访问该 imageDimention 对象并设置其 imageWidth 和 imageHeight 属性.在指令中设置这些属性也会在 base/parent/whatever 范围内生效：

作用域隔离示例，复制自angular documentation

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

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

创建一个 ContextService 这可用于在不同 angular 组件之间共享数据，而不仅仅是这些图像属性。有一个有点通用的 ContextService 很好，这样它就可以 reused/general 了。

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

然后您可以将此服务注入您的 angular 组件（controllers/directives/other 服务）并将其作为某种全局对象访问，因为服务是单例的，这将为您提供数据共享模块.

在你的情况下，你可能有一个连接到视图的控制器，所以假设你有那个控制器，应该在这个控制器范围内声明一个对象说 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();
        });
    }
   })();

希望这对您有所帮助...

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

How to pass data from directive to parent scope in my case?

javascript

directive

angularjs