javascript - 需要帮助理解为什么在指令链接函数中创建对 $scope 的引用有效

Question

我试图理解为什么我需要以特定的方式编写我的函数，以免引发错误。我不确定这是 Angular 的事情、Javascript 的事情还是两者的组合，但很想获得一些帮助来理解这一点。

我创建了一个指令，当用户选择某些文本时，该指令会创建一个弹出窗口。我专门针对 mouseup 事件，并在指令的链接函数中对其进行设置。

我的指令的简化版本如下所示:

(function() {
'use strict';

angular.module('myApp')
    .directive('myPopOver', myPopOver);

myPopOver.$inject = [ '$http',
                      '$rootScope',
                      '$compile',
                      '$controller' ];

function myPopOver( $http, $rootScope, $compile, $controller ) {
    return {
        restrict : 'A',
        link     : postLink,
        scope    : {
            popOverController   : '=',
            popOverControllerAs : '=',
            evidenceCollection  : '=',
            popOverTemplateUrl  : '=',
            minStringLength     : '=',
            enablePopOver       : '='
        }
    };

    function postLink( $scope, iElement, iAttrs, controller ) {
        var MIN_LENGTH;

        MIN_LENGTH = $scope.minimumStringLength != null ? $scope.minimumStringLength : 5;

        return iElement.on('mouseup', handleMouseUpEvent);

        function handleMouseUpEvent( event ) {
            var selectedText, meetsLengthRequirements, canDisplayPopOver;

            if ( $scope.enablePopOver === undefined ) {
                canDisplayPopOver = true;
            } else {
                canDisplayPopOver = $scope.enablePopOver;
            }
            selectedText            = window.getSelection();
            meetsLengthRequirements = selectedText.toString().length >= MIN_LENGTH;

            if ( !selectedText.isCollapsed && !activePopOver && meetsLengthRequirements && canDisplayPopOver) {
                return onTextSelect(event, selectedText);
            }
            else {
                return clearPopOver();
            }
        }
    }
})();

上面的这个版本可以工作。但是，当我最初创建处理 mouseup 事件的函数时，我将其编写如下:

function handleMouseUpEvent( event ) {
    var selectedText, meetsLengthRequirements;

    if ( $scope.enablePopOver === undefined ) {
        $scope.enablePopOver = true;
    } 

    selectedText            = window.getSelection();
    meetsLengthRequirements = selectedText.toString().length >= MIN_LENGTH;

    if ( !selectedText.isCollapsed && !activePopOver && meetsLengthRequirements && $scope.enablePopOver) {
        return onTextSelect(event, selectedText);
    }
    else {
        return clearPopOver();
    }
}

但是，这个版本会引发 Angular 错误:

Expression 'undefined' used with directive 'myPopOver' is non-assignable!

可以在此处找到错误的详细信息:https://docs.angularjs.org/error/$compile/nonassign

我的指令有效，但不知道这个问题的答案让我很困扰，我也很想提高对 Angular 和 Javascript 的理解，具体取决于我的原始代码最终出了什么问题。

感谢您的帮助!

Answer 1

您已在指令定义中将 enablePopOver 定义为双向绑定(bind)(使用 '=')。然而，您在评论中说这个属性并不总是存在，这意味着您不能在不存在的东西上定义双向绑定(bind)!

解决这个问题的最简单方法是始终依赖 html 中的 bool 变量

<div my-pop-over enable-pop-over="isEnabled">

并使用 $scope.isEnabled = false 初始化 Controller 中的作用域

<小时/>

如果您确实想处理属性丢失但仍模拟双向绑定(bind)的情况，则解决此问题的另一种方法是删除此行:

enablePopOver       : '='

而是直接在链接函数中观察属性(但是由于范围是隔离的，因此您需要监视父级):

if (iAttrs.enablePopOver) {
  $scope.$parent.$watch(iAttrs.enablePopOver, function(enabled) {
    $scope.enablePopOver = enabled;
  });
}

请参阅此处的示例:http://jsfiddle.net/gxttbpts/1/

<小时/>

还有更多方法可以解决这个问题。使用 {{}} 表示法，$observe 属性，甚至可能使用服务等。