Question

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

我的组件如下

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="https://2.bp.blogspot.com/-zasBPCmkmm4/V4S6jz0bOeI/AAAAAAAAHAI/qq7mYlCBjvsE4NWKWxyYi3IV9qHfpXgVwCLcB/s1600/seamlessly-repeating-background-with-abstract-composition.jpg" class="imageStyle">
</div>
<div>
  <img src="https://2.bp.blogspot.com/-zasBPCmkmm4/V4S6jz0bOeI/AAAAAAAAHAI/qq7mYlCBjvsE4NWKWxyYi3IV9qHfpXgVwCLcB/s1600/seamlessly-repeating-background-with-abstract-composition.jpg" class="imageStyle">
</div> 
<div>
  <img src="https://2.bp.blogspot.com/-zasBPCmkmm4/V4S6jz0bOeI/AAAAAAAAHAI/qq7mYlCBjvsE4NWKWxyYi3IV9qHfpXgVwCLcB/s1600/seamlessly-repeating-background-with-abstract-composition.jpg" class="imageStyle">
</div> 
<div>
  <img src="https://2.bp.blogspot.com/-zasBPCmkmm4/V4S6jz0bOeI/AAAAAAAAHAI/qq7mYlCBjvsE4NWKWxyYi3IV9qHfpXgVwCLcB/s1600/seamlessly-repeating-background-with-abstract-composition.jpg" class="imageStyle">
</div> 

<div class="border-div">  <!-- This is the border div -->
<div id="top" class="imageBorder" style="display: block;">Top</div>
<div id="left" class="imageBorder" style="display: block; "></div>
<div id="right" class="imageBorder" style="display: block; "></div>
<div id="bottom" class="imageBorder" style="display: block;">Bottom</div>
</div>

我的模板

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

所以在添加按钮时我试图为输入框分配值。但它没有采取。而且我想做那种双向约束。所以稍后我将保存按钮，因此更改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>

您还可以在$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: {
        //...
    }
});

并在视图中：

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

3 个答案: