AngularJS - 接收动态内容的组件

Posted 2023-02-23

【中文标题】AngularJS - 接收动态内容的组件

【英文标题】：AngularJS - Component receiving dynamic content

【发布时间】：2016-06-29 08:43:30

【问题描述】：

早上，

我编写的一个新组件存在问题，其中一个值没有像我想象的那样传递给控制器​​。

让我们来看看这个组件声明，你可以看到我传入了两个字符串和一个对象，该对象等同于来自父控制器的数字。让我们假设 'url' 和 'pagesize' 已经很好地工作了——他们确实做到了:)

<paging url="/myurl.html" pagesize="10" numberofitems="ctrl.mynumber"></paging>

您可以看到我在这里创建了一个新模块，该模块目前只显示一个段落标签，其中显示了数字“ctrl.numberofitems”变量。重要的是要知道这可以正常工作并且值可以正确显示。

    angular.module('PagingModule', [])
    .component('paging', 
        scope: ,
        controllerAs: 'ctrl',
        bindings: 
            url: '@',
            pagesize: '@',
            numberofitems: '='
        ,
        controller: pagingController,
        template: '<p>ctrl.numberofitems</p>'
    );

    function pagingController() 
        var vm = this;
        $scope.$watch("ctrl.numberofitems", function (val)  //ADDED THE WATCH AND CAN NOW SEE THE VALUE UNDEFINED, THEN POPULATED CORRECTLY
            console.log(val);
        );
    

当我尝试引用“vm.numberofitems”时，我收到未定义的信息吗？此时，“pagesize”和“url”都可以完全访问和填充。

编辑：现在，如果我参考如上所示的 $scope.watch，我可以访问从我的控制器推入的值 - 我现在要注意的是该值是未定义的，那么当服务的承诺已解决，它会更改为实际列表本身。

现在问题变了:) 为什么我必须这样做 $watch？这似乎完全矫枉过正，而且显然很昂贵；我只是错过了一个我可以使用的非常明显的模式吗？

再次感谢

【参考方案1】：

尝试等待$onInit。

控制器实例化后，隔离作用域绑定的初始值将绑定到控制器属性。您可以通过提供一个名为 $onInit 的控制器方法在初始化这些绑定后访问它们，该方法在元素上的所有控制器都已构建并初始化其绑定后调用。

-- https://docs.angularjs.org/api/ng/service/$compile#-bindtocontroller-

---

接下来要做的是在上面加上$watch。

$scope.$watch("ctrl.numberofitems", function(newValue) 
    console.log(newValue);
);

如果视图可以看到它，那么手表应该可以看到它。

【讨论】：

仍然没有，调试这个的最好方法是什么？显然，该项目正在传递，因为它出现在视图中，只是没有在控制器中定义.....仅供参考，我已将 $onInit 添加到上面的代码中。