爲什麼這個angularjs組件綁定不起作用，但是相同的樣式指令正在工作

我試圖在下面創建簡單的組件，但沒有成功。對象「priceLevel」的雙向綁定在模板中未定義，並且/或者我在控制檯中將其註銷。但是，如果我註釋掉組件代碼並取消註釋代碼以創建類似的指令，它將按預期工作。有人能告訴我我做錯了什麼，或者解釋爲什麼它不能作爲一個組件工作。我使用angularjs 1.6.6爲什麼這個angularjs組件綁定不起作用，但是相同的樣式指令正在工作

我用下面的HTML調用組件：

<price-level-header-component price-level="price_level"></price-level-header-component>

價格水平，header.component.js：

(function() { 
    // var app = angular.module('priceLevelHeaderComponent',[]); 
    // app.directive('priceLevelHeaderComponent', function(){ 
    // return { 
    //  restrict: 'E', 
    //  templateUrl:'/packages/rmsg/perp-inventory-control/js/templates/price-level-header.component.html', 
    //  scope:{ 
    //  priceLevel: "=", 
    //  }, 
    //  controller: function($scope) { 
    //   console.log($scope.priceLevel,'$scope.priceLevel'); 
    //  }, 
    // }; 
    // }); 

    var app = angular.module('priceLevelHeaderComponent',[]); 

    app.component('priceLevelHeaderComponent', { 
     bindings: { 
      priceLevel: '=' 
     }, 
     controller: function() { 
      console.log(this.priceLevel,'this.priceLevel'); 
     }, 
     templateUrl: '/packages/rmsg/perp-inventory-control/js/templates/price-level-header.component.html' 
    }); 
})();

價格水平頭.component.html：

<table class="table table-borderless"> 
<tbody> 
    <tr> 
     <th class="col-sm-2">Short Code</th> 
     <th class="col-sm-4">Description</th> 
     <th class="col-sm-2 jrcenter" title="When Checked, prices will not be generated in advance">Realtime Rules</th> 
     <th class="col-sm-4"></th> 
    </tr> 
    <tr> 
     <td><input class="form-control" name="short_code" type="text" ng-model="priceLevel.short_code"></td> 
     <td><input class="form-control" name="description" type="text" ng-model="priceLevel.description"></td> 
     <td class="jrcenter-cell"><input type="checkbox" ng-model="priceLevel.realtime_rules"></td> 
     <td> 
      <a ng-click="saveLevel()" class="btn btn-primary">Save and Update Pricing</a> 
      <a ng-click="deleteLevel()" class="btn btn-danger">Delete Level</a> 
     </td> 
    </tr> 
</tbody>

來源

2017-09-01 jefflroberts

不要做控制檯登錄控制器，在Oninit中執行 – harishr

好吧，這是有道理的，但爲什麼它不顯示在模板中呢？ – jefflroberts

好了，所以在這裏簡單的答案是我只需要我的前綴值與$ CTRL模板，像這樣：

<input class="form-control" name="short_code" type="text" ng-model="$ctrl.priceLevel.short_code">

，並得到的console.log工作，我需要裏面堅持下去一個這樣的OnInit $功能是這樣的：

var app = angular.module('priceLevelHeaderComponent',[]); 

app.component('priceLevelHeaderComponent', { 
    bindings: { 
     priceLevel: '=' 
    }, 
    controller: function() { 
     this.$onInit = function() { 
      console.log(this.priceLevel,'this.priceLevel'); 
     }; 
    }, 
    templateUrl: '/packages/rmsg/perp-inventory-control/js/templates/price-level-header.component.html' 
});

我不回答我的問題真的很熱衷，但我得到了我通過對這個問題，並在錯誤的方向上的評論一些試驗和所需要的答案第一個答案。

來源

2017-09-01 17:31:54 jefflroberts

綁定連接到組件體系結構中的控制器。在指令中，默認情況下它們被附加到作用域。您可以使用bindToController

將指令附加到控制器上。最佳做法是不要將查看數據和方法放在$scope上。將它們放在您的控制器上，默認情況下，它是一個組件中的$scope.$ctrl。所以在你的模板中，你可以將它們引用爲$ctrl.methodName()和$ctrl.property。

來源

2017-09-01 17:13:05

爲什麼這個angularjs組件綁定不起作用，但是相同的樣式指令正在工作

回答

相關問題