0

こんにちは、ボードのいくつかのプロパティをボタンで切り替えることができる単純な jsxgraph プロットを作成しようとしました。angularを使用していますが、なぜ機能しないのかわかりません。ここにフィドルがあります

私はどんな種類の助けにも満足しています

 <div class="col-md-10">
    <div ng-controller="MyCtrl">
    <div id="jsxgbox" class="jxgbox " style="width:250px; height:250px;"></div>
    <button type="button" class="btn btn-primary" ng-model="showAxis" ng-click="showAxis = !showAxis">
    <span ng-show="showAxis">axis On</span>
    <span ng-show="!showAxis">axis Off</span></button>
    <button type="button" class="btn btn-primary" ng-model="showNav" ng-click="showNav = !showNav"> <span ng-show="showNav">Navigation On</span>
    <span ng-show="!showNav">Navigation Off</span></button>
    </div>
</div>

var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.showAxis = true;
$scope.showNav = false;
$scope.axisOn = true
$scope.board = JXG.JSXGraph.initBoard('jsxgbox', {
    unitX: 10, // this are the lighter gray lines parallel ro the y axis
    unitY: 10,
    axis: $scope.showAxis,
    showNavigation: $scope.showNav,
    showCopyright: false,
    grid: true,
    wheel: true,
    keepaspectratio: true,
    needshift: false,
    boundingbox: [-5, 5, 5, -5] // upperleft corner ( x1,y1) bottom right corner (x2,y2)
});
}
4

1 に答える 1

0

JSXGraph では、デフォルトの軸とナビゲーション バーの動作が他の要素とは少し異なります。ナビゲーション バーは、CSS 属性を HTML div に直接設定することによってのみオフにすることができます。これがあなたの例の実用的なバージョンです。コードが洗練されていない場合は申し訳ありません。これは私の最初のangual.jsアプリケーションです。しかし、JSXGraph と angualrs.jus がどのように連携するかを見るのは素晴らしいことです。

<!doctype html>
<html ng-app="JSXGraphApp">
  <head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script type="text/javascript" src="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
    <link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css"/>

  </head>
  <body>
    <div class="col-md-10">          
        <div ng-controller="JSXGraphController">
            <div id="jsxgbox" class="jxgbox " style="width:250px; height:250px;"></div>
            <button type="button" class="btn btn-primary" ng-model="showAxis" ng-click="toggleAxis()">
                <span ng-show="showAxis">axis On</span>
                <span ng-show="!showAxis">axis Off</span>
            </button>
            <button type="button" class="btn btn-primary" ng-model="showNav" ng-click="toggleNav()"> 
                <span ng-show="showNav">Navigation On</span>
                <span ng-show="!showNav">Navigation Off</span>
            </button>
            <button type="button" class="btn btn-primary" ng-model="showPoint" ng-click="togglePoint()"> 
                <span ng-show="showPoint">Show point</span>
                <span ng-show="!showPoint">Hide point</span>
            </button>
        </div>
    </div>
  </body>
</html>

<script type="text/javascript">

var JSXGraphApp = angular.module('JSXGraphApp', [])
    .controller('JSXGraphController', function($scope) {

    $scope.showAxis = true;
    $scope.showNav = false;
    $scope.showPoint = true;
    $scope.axisOn = true;
    $scope.board = JXG.JSXGraph.initBoard('jsxgbox', {
        unitX: 10, // this are the lighter gray lines parallel ro the y axis
        unitY: 10,
        axis: $scope.showAxis,
        showNavigation: $scope.showNav,
        showCopyright: false,
        grid: true,
        wheel: true,
        keepaspectratio: true,
        needshift: false,
        boundingbox: [-5, 5, 5, -5] // upperleft corner ( x1,y1) bottom right corner (x2,y2)
    });

    $scope.toggleNav = function() {
        var navbar = document.getElementById($scope.board.containerObj.id + '_navigationbar');
        $scope.showNav = !$scope.showNav;
        if ($scope.showNav) {
            navbar.style.display = "block";
        } else {
            navbar.style.display = "none";
        }
    };

    $scope.toggleAxis = function() {
        $scope.showAxis = !$scope.showAxis;
        $scope.board.defaultAxes.x.setAttribute({visible: $scope.showAxis});
        $scope.board.defaultAxes.y.setAttribute({visible: $scope.showAxis});
    };

    $scope.p = $scope.board.create('point', [1, 2]);
    $scope.togglePoint = function() {
        $scope.showPoint = !$scope.showPoint;
        $scope.p.setAttribute({visible: $scope.showPoint});
    };
});
</script>
于 2015-10-13T12:43:33.393 に答える