Question

您好我尝试制作一个简单的jsxgraph图，我可以用按钮切换电路板的某些属性。我正在使用角度，但我不明白为什么它不起作用。这是fiddle

我对任何帮助感到高兴

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

Answer 1

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

使用angular切换按钮切换jsxgraph板属性

1 个答案: