Question

我有一个带有以下控制器的应用程序：

var app = angular.module('someApp', []);
app.controller('mainCtrl', function($scope, $timeout) {
    $timeout(function() {
        $scope.myObject = {
            type: 'blaat'
        }
    }, 5000);
});

它有一个超时，在5秒后在mainCtrl上创建一个具有type属性的对象。我还定义了一个带有类型属性的组件：

app.component('createSome', {
    templateUrl: 'create.html',
    controller: 'createController as create',
    bindings: {
        type: '='
    }
});

当该对象上的类型可用且类型传递给该组件时，将呈现该组件：

<body ng-controller="mainCtrl">
    mainCtrl object: {{ myObject.type }}

    <create-some 
      ng-if="myObject.type"
      type="myObject.type">
    </create-some>
</body>

该组件的控制器在初始化时创建具有该类型的新对象。这是出问题的地方;对象永远不会获得type属性。我还在初始化createController时添加了一个额外的console.log，并且在那里也没有看到type属性。然而，该类型正在控制器上的组件内正确打印。

app.controller('createController', function($scope) {
    var vm = this;

    console.log('creating create controller', vm.type);

    vm.newObject = {
        type: vm.type
    };
});

我猜这是某种时间问题;在控制器范围内设置组件的属性之前，控制器正在初始化。我的问题是：我需要做些什么才能让组件控制器中的对象按需工作。我唯一能想到的，但宁可避免，就是使用手表。

我还创建了包含以上所有内容的以下内容：
https://plnkr.co/edit/XIfm1y6GBT2WcFKBvlPY

我问这个是因为我正在处理的应用程序中有类似的情况。奇怪的是，这似乎在所有环境的生产中都能正常工作。在本地运行代码时（使用gulp with browserify），它在Windows计算机上失败，但在我的macbook上没有。哪种打击我的想法。它以前在Windows计算机上运行，并且在这两部分之间没有发生代码更改。如果有人对此有解释会更好，但我很高兴已经用正确的方法处理它。 :-) 除了plunk在我测试它的任何机器上表现相同，所以它可能是项目其余部分特定的东西。

Answer 1

通过查看component documentation组件绑定（在您的情况下为int count）在组件调用vm.type后可用 - 您没事，但您有点早到=）。请检查running plnkr。我不知道为什么它可以为你做一些环境，但通过阅读文档它不应该工作。也许你很幸运，因为你的其他软件更快，并且在组件被实例化的那一刻解析了$onInit。

vm.type

AngularJS绑定属性到组件中的对象

1 个答案: