AngularJS - 接收动态内容的组件

AngularJS - Component receiving dynamic content

本文关键字：组件 动态 AngularJS      更新时间：2023-09-26

早上，

我编写的新组件遇到了问题，其中值没有像我想象的那样传递给控制器。

因此，让我们以这个组件声明为例，您可以看到我传入了两个字符串和一个对象，该对象相当于父控制器中的一个数字。让我们假设"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"时，我是否收到未定义？此时，"页面大小"和"URL"都可以完全访问和填充。

编辑：现在，如果我如上所示引用$scope.watch，我可以访问从控制器推送的值 - 我现在注意到的是该值是未定义的，然后当服务的承诺被解析时，它会更改为实际列表本身。

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

再次感谢

尝试等待$onInit 。

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

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

接下来要做的是给它放一个$watch。

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

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

相关文章：