组件绑定不起作用：Angularjs
Posted
技术标签:
【中文标题】组件绑定不起作用：Angularjs【英文标题】：Component binding not working : 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 绑定？您应该提供组件的使用方式。
【参考方案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>
【讨论】：
以上是关于组件绑定不起作用：Angularjs的主要内容，如果未能解决你的问题，请参考以下文章
当我在 Angularjs 中绑定来自响应的数据时，引导多选不起作用
在 AngularJS + Bootstrap 中添加数据切换属性时，单选按钮绑定不起作用