组件绑定不起作用：Angularjs答案

【问题标题】：Component binding not working : Angularjs组件绑定不起作用：Angularjs
【发布时间】：2017-05-02 23:49:56
【问题描述】：

您好，我正在尝试创建一个组件，它在控制器中工作正常，但不能将值绑定到视图。

我的组件如下

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 中替换。

谢谢。

【问题讨论】：

bindings 将值绑定到控制器实例，而不是 $scope。
在cancelAdd 你有$scope.items。 items 是否应该是 data 绑定？您应该提供组件的使用方式。

标签： angularjs binding components two-way

【解决方案1】：

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

【讨论】：

【解决方案2】：

在控制器中，将$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: {
        //...
    }
});

在视图中：

【讨论】：

【解决方案3】：

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

【讨论】：