javascript - 如何捕获指令中范围变量的更改？

Question

我有一些 html 指令:

<dropdown placeholder='' list='sizeWeightPriceArr' selected='selectedProductSize' property='size' value='size' style='width:60px;'></dropdown>

selectedProductSize => 范围变量。基本思想=>我在下拉列表中选择了一些值，并且所选属性中的该变量保存所有更改。 JS:

.directive('dropdown', ['$rootScope', function($rootScope) {
    return {
        restrict: "E",
        templateUrl: "templates/dropdown.html",
        scope: {
            placeholder: "@",
            list: "=",
            selected: "=",
            property: "@",
            value: "@"
        },
        link: function(scope, elem, attr) {
            scope.listVisible = false;
            scope.isPlaceholder = true;

            scope.select = function(item) {
                scope.isPlaceholder = false;
                scope.selected = item[scope.value];
                scope.listVisible = false;

            };

            scope.isSelected = function(item) {                                                                                      
                return item[scope.value] === scope.selected;
            };

            scope.show = function() {
                scope.listVisible = true;
            };

            $rootScope.$on("documentClicked", function(inner, target) {
                if(!$(target[0]).is(".dropdown-display.clicked") && !$(target[0]).parents(".dropdown-display.clicked").length > 0) {
                    scope.$apply(function() {
                        scope.listVisible = false;
                    });
                }
            });                     

            scope.$watch('selected', function(value) {
                if(scope.list != undefined) {
                    angular.forEach(scope.list, function(objItem) {
                        if(objItem[scope.value] == scope.selected) {
                            scope.isPlaceholder = objItem[scope.property] === undefined;
                            scope.display = objItem[scope.property];
                        }
                    });
                }
            });

            scope.$watch('list', function(value) {
                angular.forEach(scope.list, function(objItem) {
                    if(objItem[scope.value] == scope.selected) {
                        scope.isPlaceholder = objItem[scope.property] === undefined;
                        scope.display = objItem[scope.property];
                    }
                });
            });

        }
    }
}])

dropdown.html 不无关紧要。当我进行选择时，scope.select函数在指令内运行，并在scope.selected = item[scope.value];中设置选定的值。这是工作。然后在 Controller 中我尝试编写 $scope.$watch 来捕获更改并运行函数，但它不起作用:

$scope.selectedProductSize = '';
$scope.$watch('selectedProductSize', function(value) {
    ...                     
});

Answer 1

您不需要使用$watch，您可以通过两种方式数据绑定(bind)将变量传递给指令

在你的 Controller 中

$scope.my_var = ''

指令 html

myvar=my_var

指令

scope: {
  myvar: '='
}

$scope.my_var 将绑定(bind)到指令 myvar，因此只要 scope.myvar 指令发生更改，$scope .my_var 也将在您的 Controller 中更新