Question

我正在编写一个可以呈现控件集合的指令。

每个控件都是一个名为fsFilter的指令 - 在我的控制器中控制父元素，我将filters数组绑定到父作用域中的数组。

这很好用，当第一次编译指令时会呈现子指令。

当我向父作用域中的filters数组添加一个新对象时，我可以看到（使用$watch）子作用域内的绑定数组已经改变但是属性中的更改没有“重新编译”。我尝试添加$apply并使用addFilter方法添加到指令的范围中，而不是直接调用element.scope()来直接调用该函数。这是因为你期望更新数组，但仍然没有重组。这也不允许我在将新对象添加到数组后直接调用$apply。

这是我的指示

.directive('fsFilterCollection', function ($compile, $timeout) {
    return {
        restrict: 'AE',        
        priority: 1002,
        scope: {
            filters: "="           
        },
        controller: function ($scope, $element, testFactory) {
            $scope.filterIndex = 0;

            $scope.filterClosedFn = function ($event, filterdata) {
                $event.stopPropagation();
                $scope.filters = $scope.filters.filter(function (el) { return el.name != filterdata });
                console.log("filter closed" + testFactory.sayHello());
            }

            if ($scope.filters) {
                angular.forEach($scope.filters, function (el) { el.index = $scope.filterIndex++; });
            }

            $scope.addFilter = function () {  
                if (arguments.length == 1 && angular.isObject(arguments[0])) {
                    $scope.filters.push(arguments[0]);
                }
                else {
                    $scope.filters.push({ filterType: "String" });
                }             
            }
        },
        template: function (element, attr) {
            return  '<div>'+
                    '   <div ng-repeat="filter in filters">'+
                    '     <div>',
                    '          <div fs-filter keepopen="true" filter-closed-fn="filterClosedFn" isopen="isopen" keepopen="true" filterdata="filter.filterdata" fs-filter actions="true" filter-type="String"></div>' +
                    '       </div>'+
                    '   </div>'+
                    '</div>'
        },
        link: function ($scope, element, attrs, ngModelController) {

            $scope.$watch('filters', function () {
                // reindex
                $scope.filterIndex = 0;
                angular.forEach($scope.filters, function (el) { el.index = $scope.filterIndex++; });
            },true);
        }
    }
})

这是我的父控制器：

var myAppModule = angular.module('development-beta', ['ui.select', 'ui.bootstrap','firespace.filtercontrol','ngSanitize']);
        myAppModule.controller('fs-controller', ['$scope', function ($scope) {

            $scope.filters = [
                { filterType:"String" }
            ];            

            $scope.addFilter = function () {
                $("#myfilters *[fs-filter]").scope().addFilter();
            }
        }]);

另外，如果可以告诉我是否更新父作用域中的绑定数组是否正确的方法？我读了一些关于使用工厂的信息，但由于它是单例，我无法看到如何在不将$ scope传递给每个调用的情况下管理每个指令的范围？

感谢您的任何建议

Answer 1

抱歉，有一个糟糕的一天。

如果其他人遇到ng-repeat没有绑定的问题，可能，可能与...有关...

 template: function (element, attr) {
            return  '<div>'+
                    '   <div ng-repeat="filter in filters">'+
                    '     <div>',
                    '          <div fs-filter keepopen="true" filter-closed-fn="filterClosedFn" isopen="isopen" keepopen="true" filterdata="filter.filterdata" fs-filter actions="true" filter-type="String"></div>' +
                    '       </div>'+
                    '   </div>'+
                    '</div>'
        },

在模板中，我不小心使用'，'（逗号）而不是用'+'连接（第4行）

我真的希望有一天能帮到某人。

AngularJS - 绑定到数组没有反映在指令中

1 个答案: