La liaison de composant ne fonctionne pas: Angularjs

Salut J'essaie de créer un composant, il fonctionne très bien dans le contrôleur, mais pas de valeurs contraignantes à afficher.La liaison de composant ne fonctionne pas: Angularjs

Mon composant est comme ci-dessous

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: "=" 
    } 
});

Mon modèle

<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>

Donc ajouter le bouton J'ai essayé d'attribuer une valeur à la boîte d'entrée. mais ça ne prend pas. et je veux faire ce lien à double sens. donc plus tard, je vais avoir le bouton de sauvegarde, donc la modification de la valeur dans TextBox remplacera dans le contrôleur.

Merci.

Source

2016-12-17 Khilen Maniyar

'bindings' lie les valeurs à l'instance du contrôleur, pas' $ scope'. – dfsq

Dans 'cancelAdd' vous avez' $ scope.items'. Est-ce que 'items' est supposé être la liaison' data'? vous devez indiquer comment le composant est utilisé. –

J'ai essayé avec $ timeout() et il a obtenu de travail.

Source

2017-11-30 11:38:19

Dans le contrôleur, modifiez $scope par this ou un alias, par ex.

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]); 
      } 
     } 
    }],

Et vu, utilisez le contrôleur par défaut de liaison à savoir $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>

Vous pouvez également changer $ctrl dans tout ce que vous voulez dans une déclaration controllerAs du composant, à savoir

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: { 
     //... 
    } 
});

et dans la vue:

Source

2016-12-17 09:37:35

Hey cochez cette 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>

Source

2016-12-17 09:45:26

La liaison de composant ne fonctionne pas: Angularjs

Répondre

Questions connexes