如何从指令中观察绑定到另一个控制器的值？答案

【问题标题】：How to watch a value bound to another controller from a directive?如何从指令中观察绑定到另一个控制器的值？
【发布时间】：2015-11-26 03:58:15
【问题描述】：

我正在尝试在视频上传框中观看一些值，我的正常输入正常工作，但是当涉及到我的自定义选择框时，事情变得有点棘手，因为它们没有 ng-model为他们设置。

编辑：这可能是一些孤立的范围问题还是类似的问题？虽然看起来很奇怪，因为我可以看到我正在从控制器获取所有信息，但手表不想观看这些值。

在我的coForms 控制器中，我这样做是为了为选择设置一个“值”：

coForms.selectOption = function(option) {
  coForms.currentOption = option;
};

在我的指令中，我这样做是为了观察值：

video.directive('videoUpload', [function() {

    return {
        scope: {
            video: '='
        },
        controller: 'CoFormsCtrl',
        controllerAs: 'co',
        templateUrl: 'app/views/components/video/video-upload.html',
        link: function(scope, element, attrs) {

            scope.$watch('video.title', function(newVal, oldVal) {
                scope.video.formData.title = newVal;
            });

            scope.$watch('video.description', function(newVal, oldVal) {
                scope.video.formData.description = newVal;
            });

            scope.$watchCollection('video.tags.filteredTags', function(newVal, oldVal) {
                scope.video.formData.tags = newVal;
            });

            // How do I make this one work?
            scope.$watch('scope.co.currentOption', function(newVal, oldVal) {

            });
        }
    };
}]);

如何查看自定义选择框的值？该值位于scope.co.currentOption 中，但是一旦我使用controller 和controllerAs 声明它，我不明白如何在我的指令中查看该值。有什么想法吗？

【问题讨论】：

试试scope.$watch('co.currentOption',...
我做了，但它不起作用，我只能通过范围访问“co”，但它仍然不想看值

标签： angularjs angularjs-directive watch

【解决方案1】：

试试这个：

video.directive('videoUpload', [function() {    
    return {
        scope: {
            video: '='
        },
        controller: 'CoFormsCtrl',
        controllerAs: 'co',
        templateUrl: 'app/views/components/video/video-upload.html',
        link: function(scope, element, attrs, ctrl) {

            // How do I make this one work?
            scope.$watch(function() {
               return ctrl.currentOption;
            }, function(newVal, oldVal) {
               // ...
            });
        }
    };
}]);

【讨论】：

你能创建一个 jsbin/fiddle 吗？

【解决方案2】：

试试这个：在 html <div video-upload ctrl="coForms"></div> 和指令中应该是

video.directive('videoUpload', [function() {

    return {
        templateUrl: 'app/views/components/video/video-upload.html',
        link: function(scope, element, attrs) {

             scope.ctrl = scope.$eval(attrs.ctrl);
             scope.video = scope.$eval(attrs.video);
            // How do I make this one work?
            scope.$watch('ctrl.currentOption', function(newVal, oldVal) {
// It will work
            });
        }
    };
}]);

【讨论】：

我不明白这是怎么回事，但它也不起作用：|
你可以试试
不幸的是同样的结果。
我已经创建了一个演示，请检查一次codepen.io/anon/pen/OyYYjG

【解决方案3】：

如果您无法了解范围级别，请将其分配给 $rootScope.currentOption。我不确定，但是如果您从其他控制器观看模型/变量并尝试在指令中访问，则会出现问题。

希望得到帮助！！

【讨论】：

我不想弄乱rootScope，除非它是我可用的最后一个选项。仍然没有让这个工作，所以我必须调查。