Question

我的问题是$ scope.isValid没有绑定到ng-show =＆＃34; {{isValid}}＆＃34;而且我不知道为什么。

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

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

这是我的方案的plunker链接。

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

Answer 1

试着像这样使用：

＆＃13;

'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;
				}
			}
		}
	};
});

＆＃13;

<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>

＆＃13;

Answer 2

请ng-show="isValid" 你不需要花括号，因为ng-show是一个指令，它会为你调用$ parse。

Answer 3

我发现我有几个问题。一个与范围绑定camelcase名称有关。你也谈到了大括号。缺少绑定数据属性isvalid =＆＃34; isvalid＆＃34;在指令主标记中。

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

以下是我在Plunker的工作方案

它应该是无效的：＆＃39; =＆＃39;，isValid：＆＃39; =＆＃39;，
我错过了isvalid =＆＃34; isvalid＆＃34;在指令标签中：
此处没有大括号ng-hide =＆＃34;无效＆＃34;
```
Working solution:
```
http://plnkr.co/edit/puOeoJ37LZXZ7ZRXVTKt?p=preview

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

3 个答案: