Компонент не работает: 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>

Так на кнопку Я пытался присвоить значение поля ввода добавить. но это не принимает. и я хочу сделать эту двустороннюю привязку. поэтому позже у меня будет кнопка сохранения, поэтому изменение значения в TextBox будет заменено в контроллере.

Спасибо.

источник

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>

Вы также можете изменить $ctrl в то, что вы хотите в controllerAs декларации компонента, т.е.

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

и на вид:

источник

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

ответ

Смежные вопросы