0
変数の値を指令から変更しようとすると問題が発生します。指令のAngularJS更新値
私はそれを正しく説明することができないので、それはより理解できるようにしました。 私は2つのボタンのリストを持っている：
- 一つはNG-ショーがtrueのときに表示される3つのボタン、で構成されています。 （プランナーの 'module'変数）
- もう1つは、この 'モジュール'変数を変更する他のボタンで構成されています。
第2のリスト[実際には関数を呼び出す]のボタンをクリックする際に 'module'変数を変更すると、指示文はそれを更新しないため、ボタンの最初のリストは更新されませんあまりにも。 （最初のボタンは引き続き表示されますが、消えて別のボタンがポップされます）。
私はそれについていくつかのトピックを読んで、すべての変更をキャッチするためにディレクティブでウォッチ機能を実行する必要があることがわかりました。しかし、それは動作しません。それは1回だけ通過し、それは最初です。
// index.html
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link data-require="[email protected]*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script data-require="[email protected]*" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="script.js"></script>
<script src="appDirective.js"></script>
<script src="appController.js"></script>
</head>
<body ng-app="tmp">
<app-module module="1" id="module"></app-module>
<button onClick="changeModule(2)">Change to 2</button>
<button onClick="changeModule(3)">Change to 3</button>
</body>
</html>
// script.js
angular.module('tmp', []);
changeModule = function(value) {
console.log(value);
$('#module').attr('module', value);
}
// appDirective.js
'use strict';
angular.module('tmp')
.directive('appModule', function() {
return {
restrict: 'AE',
templateUrl: "app.html",
controller: "appController",
scope: {
state: "@",
'module' : '@'
},
link: function($scope) {
$scope.$watch('module', function(newVal) {
console.log(newVal);
}, true);
}
}
});
// appController.js
'use strict';
angular.module('tmp')
.controller('appController', ["$scope", function ($scope) {
$scope.sendData = function() {
};
}
]);
// app.html
<submit ng-click="sendData()">
<button class="btn btn-block btn-social btn-google" style="text-align:center;margin-left: auto;margin-right: auto;display: inline-block;" ng-show="{{module == 1}}">
<span class="fa fa-google"></span> Google button
</button>
<button class="btn btn-block btn-social btn-github" style="margin-left: auto;margin-right: auto;text-align:center;display: inline-block;" ng-show="{{module == 2}}">
<span class="fa fa-github"></span> Github button
</button>
<button class="btn btn-block btn-social btn-facebook" style="margin-left: auto;margin-right: auto;text-align:center;display: inline-block;" ng-show="{{module == 3}}">
<span class="fa fa-facebook"></span> Facebook button
</button>
</submit>
Plunker：https://plnkr.co/edit/xBHCDCygCmra62wMGnsM?p=preview
私は謝罪、あなたがより多くの情報が必要な場合は、ちょうど私に尋ねるので、私は自分自身を明らかにしている場合、私は知りません。誰かが私を啓発できますか？
ありがとうございました！
クリックハンドラを呼び出すには、 'ng-click'ディレクティブを使用します。 'on-click'はグローバル名前空間を混乱させる。 – georgeawg
ええ、私の悪いですが、まだ動作していません...回答ありがとうございます – NPanda