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：將控制器變量傳遞給組件標籤

回答

相關問題