代码之家 › 专栏 › 技术社区 › Ð¡Ð²Ð¾Ð±Ð¾Ð´ÐµÐ½ Ð Ð¾Ð±

AngularJS自定义指令中的TwoWay数据绑定在ng show中不起作用

angularjs-directive data-binding angularjs

Ð¡Ð²Ð¾Ð±Ð¾Ð´ÐµÐ½ Ð Ð¾Ð± · 技术社区 · 9 年前

我的问题是$scope。isValid未绑定到ng show=“{{isValid}}”,我不知道为什么。

我的目标是当isValid为true时,这个范围应该是可见的,并且当输入字段中有值时它是有效的。

<span class="warning" ng-show="{{isValid}}" style="color: red;">
    Please answer the question to continue.
</span>

这是我的场景的punker链接。

http://plnkr.co/edit/qZ47TFg2G741PxdARiYR?p=preview

3 回复 | 直到 9 年前

mehmetakifalp 9 年前

尝试这样使用:

'use strict';

var codeArtApp = angular.module("codeArtApp", ['ui.router']);

codeArtApp.directive('submitquestion', function($http) {
	return {
		scope: { 
			questId: '@',
			answerId: '@',
			isValid: '=ngShow',
		},
		link: function(scope, el, attrs) {
			$(el).find('.btn').on('click', function(e) {
				
				scope.sendQuesiton();

			})
		},
		controller: function($scope) {
			$scope.isValid = false;

			$scope.sendQuesiton = function () {
				$scope.validateQuestion();
       
       if ($scope.isValid) {
				alert('is Valid')
       } else {
         alert('Not Valid');
       }
			}

			$scope.validateQuestion = function() {
				if ($scope.answerId.length) {
				  console.log($scope.answerId);
					$scope.isValid = true;
				}
			}
		}
	};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="codeArtApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script data-require="ui-router@*" data-semver="0.2.8" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <input type="text" ng-model="edit">
    <div data-submitquestion="" data-questId="862"  data-answer_id="{{edit}}">
      <button class="btn btn__next">Ð¡Ð»ÐµÐ´Ð²Ð°Ñ Ð²ÑÐ¿ÑÐ¾Ñ</button>
      <span class="warning ng-hide" ng-show="isValid == true" style="color: red;">
						Please answer the question to continue.
				</span>
    </div>
  </body>

</html>

Qi Tang 9 年前

请这样做 ng-show="isValid" 你不需要花括号,因为 ng-show 是一个指令,它将为您调用$parse。

Community CDub 7 年前

我发现我有几个问题。一个与范围绑定camelcase名称有关。还有你说的花括号。指令主标记中缺少绑定数据属性isvalid=“isvalid”。

与此问题类似。 Angular "=" scope does not work with camelCase

这是我在Plunker的工作场景

它应该是isvalid:'=',而不是isvalid:'='',
指令标记中缺少isvalid=“isvalid”:
这里没有大括号ng-hide=“isvalid”
```
Working solution:
```
http://plnkr.co/edit/puOeoJ37LZXZ7ZRXVTKt?p=preview