구성 요소 바인딩 작동하지 않습니다 : 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의 값을 변경하면 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

답변

관련 문제