观察时AngularJS指令属性不呈现值答案

【问题标题】：AngularJS directive attribute not rendering value when observed观察时AngularJS指令属性不呈现值
【发布时间】：2013-09-12 04:14:27
【问题描述】：

我在检索传递给指令的属性值时遇到问题。我对指令如何工作的理解可能与此有关，但我假设这是与范围相关的问题。

如果您检查下面的代码，您会看到该属性是这样使用的：

display="contest.StyleBgImageMedia.filename"

contest.StyleBgImageMedia.filename 的这个值是一个字符串，我已经通过从控制器中对其进行安慰来验证它是否存在。问题是当尝试在指令链接函数中访问它时，我无法检索值，只能检索属性名称。

该指令在视图中使用如下：

<uploader class="pull-left" action="builder/uploadMediaFile" display="contest.StyleBgImageMedia.filename" data-file="style_bg_image_media_id"></uploader>

完整的指令已在下方发布。你会看到我正在使用 $observe 来呈现 display 属性的值，但这不起作用。

app.directive('uploader', function($rootScope) {
    return {
        restrict: 'E',
        scope: {
            action: '@',
            display: '@display'
        },
        link: function(scope, elem, attrs) {
            elem.find('.fake-uploader').click(function() {
                elem.find('input[type="file"]').click();
            });

            scope.progress = 0;

            attrs.$observe('display', function(value) {
                if (value) {
                    scope.avatar = value;
                }
            });

            scope.sendFile = function(el) {
                var $form = jQuery(el).parents('form');
                if (jQuery(el).val() === '') {
                    return false;
                }

                $form.attr('action', scope.action);
                scope.$apply(function() {
                    scope.progress = 0;
                });

                $form.ajaxSubmit({
                    type: 'POST',
                    uploadProgress: function(event, position, total, percentComplete) {
                        scope.$apply(function() {
                            scope.progress = percentComplete;
                        });
                    },
                    error: function(event, statusText, responseText, form) {
                        $form.removeAttr('action');
                    },
                    success: function(responseText, statusText, xhr, form) {
                        var ar = jQuery(el).val().split('\\'),
                            filename =  ar[ar.length-1];

                        $form.removeAttr('action');
                        scope.$apply(function() {
                            scope.avatar = filename;
                        });

                        var response = jQuery.parseJSON(responseText);
                        $rootScope.$broadcast('file-uploaded', {
                            'model': attrs.file,
                            'file': response.message
                        });
                    }
                });

            };
        },
        replace: false,
        templateUrl: 'builder/views/partials/upload.php'
    };
});

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-scope

【解决方案1】：

$observe 不起作用，除非属性值包含插值。

因此，您可以将属性更改为：

<uploader display="{{contest.StyleBgImageMedia.filename}}" ...>

或者，您可以使用 watch：scope.$watch('display', ...) 与此隔离范围绑定：

display: '='

【讨论】：

您在这里查看了一个很好的答案，解释了 $observe 和 $watch 之间的区别 (stackoverflow.com/a/14907826/1310945)
很好的反馈，谢谢。我很难理解两者之间的区别。