Question

我有以下问题。有一个服务负责存储一些选定的对象ID。当选择一个对象时，$ rootScope广播事件以通知所涉及的控制器。

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);

我在视图中使用$ 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);

我在视图中使用$ 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>

在控制器$ scope中。$ on工作正常。我在开发人员工具中看到所有变量都已更新。

问题是未创建html中的列表。我认为我失踪了关于ng-repeat derictive如何与控制器一起工作的东西，但是无法在Angular JS文档中找到解决方案。
第二个问题是使用$ broadcast（）进行通知的好方法控制器关于服务的变化。

更新：这是attachPropertyFactory代码：

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();
        });
}

它适用于我，但我仍然不确定它是否正确解决。

使用带有$ scope的angularjs ng-repeat指令。$ broadcast（）/ $ scope。$ on（）

1 个答案: