コンポーネントバインドが機能しない：Angularjs

こんにちはコンポーネントを作成しようとしていますが、コントローラでうまく動作しますが、バインド値は表示されません。コンポーネントバインドが機能しない：Angularjs

私のコンポーネントは

app.component("bdObjects", { 
    templateUrl: "app/templates/components/BusinessObjects.html", 

    controller: ["$scope", "$http", "$log", "API_ROOT", "VisDataSet", 
     function ($scope, $http, $log, API_ROOT, VisDataSet) { 


     $scope.fnAdd = function() { 
      $scope.objectId = ""; 
      $scope.objectName = "Test Object"; 
      console.log($scope.objectName); 
     } 

     $scope.cancelAdd = function() { 
      if($scope.items.length > 0) { 
       $log.info($scope.items[0]); 
       $scope.fnPopulateForm($scope.items[0]); 
      } 
     } 
    }], 

    bindings: { 
     data: "=", 
     objectId: "=", 
     objectName: "=" 
    } 
});

マイテンプレートように

<div class="general-form"> 
    <input type="hidden" name="id" ng-model="objectId"> 
    <label>Name:</label> 
    <br> 
    <input class="form-control" name="name" placeholder="Name" ng-model="objectName"> 
    <br> 
</div>

私は入力ボックスに値を代入しようとしたボタンを追加するには、以下の通りです。しかしそれは取っていない。私はその2つの方法で結びつきたいと思っています。後で私は保存ボタンを持っているので、TextBoxの値を変更するとControllerが置き換えられます。

ありがとうございました。

出典

2016-12-17 Khilen Maniyar

'bindings'は値を' $ scope'ではなくコントローラインスタンスにバインドします。 – dfsq

'cancelAdd'には' $ scope.items'があります。 'items'は' data'バインディングとされていますか？コンポーネントの使用方法を提供する必要があります。 –

チェックして、それが働いて得ました。

出典

2017-11-30 11:38:19

コントローラでは、$scopeをthisまたは一部のエイリアス（たとえば、

controller: ["$scope", "$http", "$log", "API_ROOT", "VisDataSet", 
    function ($scope, $http, $log, API_ROOT, VisDataSet) { 
     var ctrl = this; 

     ctrl.fnAdd = function() { 
      ctrl.objectId = ""; 
      ctrl.objectName = "Test Object"; 
      console.log(ctrl.objectName); 
     } 

     // Not sure about items: you haven't defined it, 
     // neither fnPopulateForm... 
     ctrl.cancelAdd = function() { 
      if(ctrl.items.length > 0) { 
       $log.info($scope.items[0]); 
       ctrl.fnPopulateForm(ctrl.items[0]); 
      } 
     } 
    }],

とビューで、すなわち$ctrl

<div class="general-form"> 
    <input type="hidden" name="id" ng-model="$ctrl.objectId"> 
    <label>Name:</label> 
    <br> 
    <input class="form-control" name="name" placeholder="Name" ng-model="$ctrl.objectName"> 
    <br> 
</div>

あなたはまた、すなわち

app.component("bdObjects", { 
    templateUrl: "app/templates/components/BusinessObjects.html", 
    controller: ["$scope", "$http", "$log", "API_ROOT", "VisDataSet", 
     function ($scope, $http, $log, API_ROOT, VisDataSet) { 
      //... 
    }], 
    controllerAs: 'bd', 
    bindings: { 
     //... 
    } 
});

、あなたがコンポーネントのcontrollerAs宣言で好きに$ctrlを変更することができますバインディングデフォルトのコントローラを使用しますビューでは：

出典

2016-12-17 09:37:35

はねえ、私は$タイムアウト（）を試してみました。このJS fiddle

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

<body> 
<div ng-app="myApp" ng-controller="namesCtrl"> 
    <input type="hidden" name="id" ng-model="objectId"> 
    <label>Name:</label> 
    <br> 
    <input class="form-control" name="name" placeholder="Name" ng-model="objectName"> 
    <br> 
    <button ng-click="fnAdd()"> 
    button 
    </button> 
</div> 
<script> 
    angular.module('myApp', []).controller('namesCtrl', function($scope) { 
    $scope.fnAdd = function() { 
     $scope.objectId = ""; 
     $scope.objectName = "Test Object"; 
     console.log($scope.objectName); 
    } 


    $scope.cancelAdd = function() { 
     if ($scope.items.length > 0) { 
     $log.info($scope.items[0]); 
     $scope.fnPopulateForm($scope.items[0]); 
     } 
    } 

    }); 

</script>

出典

2016-12-17 09:45:26

コンポーネントバインドが機能しない：Angularjs

答えて

関連する問題