Question

我创建了一个指令，我相信当我将绑定范围变量（textStyleOriginal）设置为null时，双向绑定正在被破坏。什么是解决此问题的好方法？

.directive('textStylePalette', function($log, toastr, _){
        return {
            restrict: 'E',
            templateUrl: 'app/palettes/text/text-style-palette.html',
            scope: {
                textStyleOriginal: '=textStyle'
            },
            link: textPaletteLinkFn
        };

        function textPaletteLinkFn(scope, elem, attr) {
            scope._ = _;
            scope.textStyle = null;

            // Used when closing the palette
            scope.deselectStyle = function() {
                // I BELIEVE THE PROBLEM IS THE NEXT LINE
                scope.textStyleOriginal = null;
                scope.textStyle = null;
            };

   ...
            // THIS WATCH STOPS WORKING.
            scope.$watch('textStyleOriginal', function(newVal, oldVal){
                $log.debug('n: ' + newVal + '|o: ' + oldVal );
                debugger;
                if (newVal && newVal !== oldVal) {
                    ...
                }
            });
}

最初连接绑定的html如下：

<text-style-palette ng-show="selectedStyle !== null" text-style="selectedStyle">
</text-style-palette>

Answer 1

我想我知道这是什么问题。

由于您有一个独立的范围，因此您将从父范围设置textStyleOriginal。这意味着如果使用值null覆盖它，那么您将丢失对原始对象的引用。例如。即使修改了父作用域中的textStyleOriginal，它也不会对你的指令产生任何影响，因为你已经丢失了对它的引用。

Answer 2

在我问这个问题后几分钟，我尝试了一些似乎有用的东西。离开这个问题来记录我的答案：

基本上这很简单，总是将传递的范围变量作为对象的一部分＆＃39;。

我进行了一些更改，以便为指令提供的外部selectedStyle是对象的一部分。这是代码

<cm-text-style-palette ng-show="selections.selectedStyle !== null" text-style="selections.selectedStyle">
</cm-text-style-palette>

请注意，它的选择 .selectedStyle不仅仅是selectedStyle。

问题与变量指向的工作方式有关。有关详细信息，此视频可能有所帮助：https://egghead.io/lessons/angularjs-the-dot#/tab-transcript

祝你的项目好运！

将范围设置为空块2路绑定角度指令

2 个答案: