组件绑定不起作用：Angularjs

Question

您好，我正在尝试创建一个组件，它在控制器中工作正常，但没有绑定要查看的值。

我的组件如下

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 中的值。

谢谢。

Answer 1

在控制器中，将 $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>

您还可以在组件的 controllerAs 声明中将 $ctrl 更改为您想要的任何内容，即

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

并且在视图中：

Answer 2

嘿，看看这个 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>

Answer 3

我试过 $timeout() 并且它开始工作了。

组件绑定不起作用：Angularjs

Component binding not working : Angularjs

binding

components

two-way

angularjs