Angularjs 1.6.4：将控制器变量传递给组件标签

我是angularjs的新手，所以可能是我做错了什么。我想要做的是将另一个组件控制器的变量通过标签传递给另一个组件。以下是示例代码。Angularjs 1.6.4：将控制器变量传递给组件标签

，view.template.html专属于后期视图组件：

<ul class="list-group"> 
<li class="list-group-item"> 
    <h4 class="list-group-item-heading">{{model.post.title}}</h4> 
    <p class="list-group-item-text">{{model.post.description}}</p> 
</li> 
</ul> 

{{model.post.id}} <!-- getting value here --> 
<rating-creator rating-type="1" parent-id="model.post.id"></rating-creator>

等级-creator.component.js：

(function() { 
    "use strict"; 

    var module = angular.module(__appName); 

    function controller() { 
     var model = this; 

     model.$onInit = function() { 
      //getting undefined here. Why? 
      console.log("parent:"+model.parentId); 
     }; 
    } 

    module.component("ratingCreator", { 
     templateUrl: "components/rating-creator/rating-creator.template.html", 
     bindings: { 
      ratingType: "<", 
      parentId: "<" 
     }, 
     controllerAs: "model", 
     controller: [controller] 
    }); 

    }());

来源

2017-05-27 MTA

为了调试，尝试注入'$ scope'并将其记录到控制台 – cYrixmorten

控制器属性值不应该是数组 – charlietfl

使用[$ onChanges生命周期钩子]（https：//docs.angularjs。 org/api/ng/service/$ compile＃life-cycle-hooks）来查看该值是否在初始化后可用。 – georgeawg

问题是最有可能model.post.id不可用当组件被实例化时。如果model.post.id的值不是undefined，则尝试使用ng-if仅生成组件的实例。它应该是这样的：

控制器

app.controller('MainCtrl', function($scope, $timeout) { 
    var model = this; 

    // simulating model.post.id not being available on page load 
    $timeout(function() { 
    model.post = { 
     id: 123 
    }; 
    }, 1000); 
});

HTML

<rating-creator ng-if="model.post.id" rating-type="1" parent-id="model.post.id"></rating-creator>

这里是一个plunker演示功能。它使用$timeout来模拟异步填充的model.post.id。

希望有帮助！

来源

2017-06-30 15:19:12

Angularjs 1.6.4：将控制器变量传递给组件标签

回答

相关问题