我的问题是$ scope.isValid没有绑定到ng-show =“{{isValid}}”，我不知道为什么。
我的目标是当isValid为真时，此跨度应该是可见的，并且当输入字段中有值时它是有效的。
<span class="warning" ng-show="{{isValid}}" style="color: red;"> Please answer the question to continue. </span>这里是我的场景的链接。
http://plnkr.co/edit/qZ47TFg2G741PxdARiYR?p=preview
My problem is that $scope.isValid is not binded to ng-show="{{isValid}}" and I don't know why.
My goal is when isValid is true this span should be visible and it is valid when there is a value in input field.
<span class="warning" ng-show="{{isValid}}" style="color: red;"> Please answer the question to continue. </span>Here is plunker link to my scenario.
http://plnkr.co/edit/qZ47TFg2G741PxdARiYR?p=preview
最满意答案
尝试使用这样：
'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>
I found that I have several problems. One is related to scope binding camelcase name. Also what you said about curly brackets. and missing binding data attribute isvalid="isvalid"in directive main tag.
Similar to this problem. Angular "=" scope does not work with camelCase
Here is my working scenario in Plunker
it should be isvalid: '=', insted of isValid: '=',
I was missing isvalid="isvalid" in directive tag :
and no curly brackets here ng-hide="isvalid"
Working solution:
http://plnkr.co/edit/puOeoJ37LZXZ7ZRXVTKt?p=preview
更多推荐
发布评论