javascript - 将 angularjs ng-repeat 指令与 $scope.$broadcast()/$scope.$on() 一起使用

Question

我有以下问题。有一个服务负责存储一些选定的对象 ID。当选择一个对象时，$rootScope 会广播事件来通知相关 Controller 。

var SelectedObjectFactory = function (objectsFactory, $rootScope) {
        var selectedObjectId;
        var selObjFactory = {};
        selObjFactory.SelectObject = function (objectID) {
           selectedObjectId = objectID
            $rootScope.$broadcast("ObjectSelected", { selectedId: selectedObjectId });
            };
        selObjFactory.GetSelectObjectId = function () {
        return selectedObjectId;
    };
        return selObjFactory;
    };
    SelectedObjectFactory.$inject = ['objectsFactory', '$rootScope'];
    app.factory("selectedObjectFactory", SelectedObjectFactory);

我在 View 中使用 $scope.attachedProperties 和 ng-repeat 来创建属性列表。

  var FormController = function ($scope, selectedObjectFactory, eventPropertiesFactory) {
      $scope.$on("ObjectSelected", function (event, selectedObject) {
        $scope.attachedProperties =     eventPropertiesFactory.GetPropertiesForEventById(selectedObject.selectedId);
    });
 }

FormController.$inject = ['$scope', 'selectedObjectFactory', 'eventPropertiesFactory'];
angular.module("svgObjectsApp").controller("FormController", FormController);

我在 View 中使用 $scope.attachedProperties 和 ng-repeat 来创建属性列表。

<div class="col-lg-3" ng-controller="FormControler">
    <table>
        <tbody>
             <tr ng-repeat="property in attachedProperties">
                 <td class="col-lg-6 tabletitle">{{property.propertyName}}</td>
                 <td class="col-lg-6"><input  type="text" value={{property .propertyValue}} / >               </td>
              </tr>
        </tbody>
   </table>
</div>

在 Controller $scope.$on 中工作正常。我在开发者工具中看到所有变量都已更新。

1. 问题是未创建 html 中的列表。我假设我失踪了关于 ng-repeat derictive 如何与 Controller 配合使用的一些内容，但是在 Angular JS 文档中找不到解决方案。

2. 第二个问题是使用 $broadcast() 进行通知的好方法有关服务变更的 Controller 。

更新:这是 AttachedPropertyFactory 代码:

var AttachedPropertiesFactory = function () {
        var propertiesArray = [];
        var propertiesFactory = {};
        propertiesFactory.PutNewPropertiesInArray = PutNewPropertiesInArray;
       propertiesFactory.GetPropertiesForEventById = GetPropertiesForEventById;
       function GetPropertiesForEventById(eventId) {
           selectedProperties = [];
           for (var i = 0; i < propertiesArray.length; i++) {
                if (propertiesArray[i].eventId === eventId) {
                    selectedProperties.push(propertiesArray[i]);
                }
            }
            return selectedProperties;
        }

        function PutNewPropertiesInArray(properties) {
            ClearPropertiesArray();
            for (var i = 0; i < properties.length; i++) {
                propertiesArray.push(properties[i]);
            }
        };
        function ClearPropertiesArray() {
            propertiesArray.length = 0;
        }

        return propertiesFactory;
    };
AttachedPropertiesFactory.$inject = [];
angular.module("svgObjectsApp").factory("eventPropertiesFactory", AttachedPropertiesFactory);

Answer 1

我找到了这个问题的解决方案。我在阅读以下文章后得到了这个想法: http://tutorials.jenkov.com/angularjs/watch-digest-apply.html .

我在事件处理程序中添加了 $scope.$digest() 。现在我在 FormController 中的代码如下所示:

var FormController = function ($scope, selectedObjectFactory, eventPropertiesFactory) {
       $scope.$on("ObjectSelected", function (event, selectedObject) {
             $scope.attachedProperties =     eventPropertiesFactory.GetPropertiesForEventById(selectedObject.selectedId);    
             $scope.$digest();
        });
}

它对我有用，但我仍然不确定它是否正确。