Menu icon Foundation
Reveal / Modal + AngularJS partials

Hi
is want to use angularjs to show the different views unsing partials.

The modal dialog works on the index page - but NOT on the included partial.
I only geht the error message:

Uncaught TypeError: Cannot read property 'css' of undefined foundation.reveal.js:175
Foundation.libs.reveal.open foundation.reveal.js:175
(anonymous function) foundation.reveal.js:58
ab.event.dispatch jquery.js:25
q.handle jquery.js:24

can someone help me out?

<!DOCTYPE html>
<!--[if IE 9]>
<html class="lt-ie10" lang="en"> <![endif]-->
<html ng-app="qKanbanMovR" class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kanban Mover</title>

    <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/foundation.css">

    <script src="js/vendor/modernizr.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script src="js/vendor/angular-1.2.13/angular.js"></script>
    <script src="js/vendor/angular-1.2.13/angular-route.js"></script>
    <script src="js/jiraQery.js"></script>

</head>

<body>

<!-- body content here -->

<div id="myModal" class="reveal-modal" data-reveal>
    <h2>Awesome. I have it.</h2>

    <p class="lead">Your couch. It is mine.</p>

    <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
    <a class="close-reveal-modal">&#215;</a>
</div>

<a data-reveal-id="myModal" data-reveal>Click Me For A Modal</a>

<div ng-view></div>

und das andere geht jetzt auch nciht mehr
<div id="test" class="reveal-modal" data-reveal>
    <h2>adsffadsfasdds. I have it.</h2>
    <p class="lead">Your couch. It is mine.</p>
    <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
    <a class="close-reveal-modal">&#215;</a>
</div>
<div align="center" STYLE="margin-top: 1em">
    <input type="button" data-reveal-id="test" data-reveal class="success button" value="log in.."/>
</div>

aber ich schon noch<a data-reveal-id="myModal" data-reveal>Click Me For A Modal</a>


<script src="js/vendor/jquery.js"></script>
<!--script src="js/foundation.min.js"></script-->
<script src="js/foundation/foundation.js">
</script>
<script src="js/foundation/foundation.reveal.js">
</script>
<script src="js/vendor/fastclick.js"></script>

<script>
    $(document).foundation();
</script>
</body>

</html>
            

         

the partial

<!-- signup ctrl-->
<div id="test" class="reveal-modal" data-reveal>
    <h2>adsffadsfasdds. I have it.</h2>
    <p class="lead">Your couch. It is mine.</p>
    <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
    <a class="close-reveal-modal">&#215;</a>
</div>
<div align="center" STYLE="margin-top: 1em">
    <input type="button" data-reveal-id="test" data-reveal class="success button" value="log in.."/>
</div>
<div class="panel">
    <h5>Signed in?</h5>

    <p>signed in: {{ user != null && 'YES' || 'NO' }} as user: <b>{{ user.username !='test' && 'custom user '+ user.username || 'default user: '+ user.username }}</b></p>
    <p></p>

</div>

<div align="center" STYLE="margin-top: 2em">
    <input type="button" class="large button" value="Scan Issue" ng-click="scan()"/>
</div>
<p>The current status for Issue Key [{{ issueKey }}] is [{{ currentStatus.name }}] with ID [{{ currentStatus.id }}]
</p>

<div>
    <h3>Transition to Status:</h3>
    <ul class="button-group">
        <li ng-repeat="transition in statuses.transitions">
            <a ng-click="makeTransition(transition.id) " class="button">{{ transition.name }}</a>
        </li>
        <li>
            <a class="medium alert button" ng-click="cancel()">Cancel</a>
        </li>
    </ul>
</div>

            

         

the angularjs

var qKanbanMovR = angular.module('qKanbanMovR', ['ngRoute']);

//Set up our site routes
qKanbanMovR.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'templates/signup.html',
                controller: 'SignupController'
            }).
            when('/scan', {
                templateUrl: 'templates/scan.html',
                controller: 'issueMover'
            }).
            otherwise({
                redirectTo: '/'
            });
    }]);

qKanbanMovR.controller('issueMover', ['$scope', '$http',
    function ($scope, $http) {
        "use strict";

        $scope.mockSucc = function () {
            var mockScan = new Array();
            mockScan[0] = "10.100.10.158:8080/browse/SKP-1";
            $scope.success(mockScan);
        }

        $scope.init = function () {

            //nix 
            //$scope.mockSucc();
        }
        $scope.searchIssue = function () {
            var jiraURL, scannedURL, index, issueKey;
            jiraURL = 'xxx';
            $scope.jiraURL = jiraURL;

            //setup default username +pwd
            $scope.user = {};
//            $scope.user = {
//                "username": "testxxx",
//                "pw": "testxxx"
//            };
            $scope.user = {
                "username": "test",
                "pw": "test"
            };

            // get all STATUSES
            $http.defaults.headers.common.Authorization = 'Basic ' + window.btoa($scope.user.username + ':' + $scope.user.pw);
            $http.get(jiraURL + $scope.issueKey + "/transitions").success(function (data) {
                $scope.statuses = data;
            });
            $http.get(jiraURL + $scope.issueKey).success(function (data) {
                $scope.currentStatus = data.fields.status;
            });
        }

        $scope.success = function (resultArray) {
            var index, issueKey;
            index = resultArray[0].lastIndexOf("/");
            issueKey = resultArray[0].substr(index + 1);
            $scope.issueKey = issueKey;
            $scope.searchIssue();
        }

        $scope.failure = function (error) {
            alert("Failed SCAN: " + error);
        }

        $scope.scan = function () {
            $scope.mockSucc();
            // See below for all available options. 
//            cordova.exec($scope.success, $scope.failure, "ScanditSDK", "scan", ["dbHAXJI6EeON21UZUXaxroI/aZczdFhXbk7hktk0mf0",
//                {
//                    "beep": true,
//                    "1DScanning": true,
//                    "2DScanning": true
//            }]);
        }
        $scope.cancel = function () {
            $scope.issueKey = null;
            $scope.currentStatus = null;
            $scope.statuses = null;
        }


        $scope.makeTransition = function (id) {
            var postData;
            postData = '{"transition": {"id": "' + id + '"}}';

            $http({
                url: $scope.jiraURL + $scope.issueKey + "/transitions",
                method: "POST",
                data: postData,
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(function (response) {
                    // success
                    $http.get($scope.jiraURL + $scope.issueKey).success(function (data) {
                        $scope.currentStatus = data.fields.status;
                    });
                },
                function (response) { // optional
                    // failed
                    alert("failed");
                }
            );
        }

    }]);

qKanbanMovR.controller('SignupController', ['$scope',
    function ($scope) {

        $scope.user = {};
        $scope.user = {
            "username": "test",
            "pw": "test"
        };
    }]);

            

         

AngularJSPartials

Hi
is want to use angularjs to show the different views unsing partials.

The modal dialog works on the index page - but NOT on the included partial.
I only geht the error message:

Uncaught TypeError: Cannot read property 'css' of undefined foundation.reveal.js:175
Foundation.libs.reveal.open foundation.reveal.js:175
(anonymous function) foundation.reveal.js:58
ab.event.dispatch jquery.js:25
q.handle jquery.js:24

can someone help me out?

<!DOCTYPE html>
<!--[if IE 9]>
<html class="lt-ie10" lang="en"> <![endif]-->
<html ng-app="qKanbanMovR" class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kanban Mover</title>

    <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/foundation.css">

    <script src="js/vendor/modernizr.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script src="js/vendor/angular-1.2.13/angular.js"></script>
    <script src="js/vendor/angular-1.2.13/angular-route.js"></script>
    <script src="js/jiraQery.js"></script>

</head>

<body>

<!-- body content here -->

<div id="myModal" class="reveal-modal" data-reveal>
    <h2>Awesome. I have it.</h2>

    <p class="lead">Your couch. It is mine.</p>

    <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
    <a class="close-reveal-modal">&#215;</a>
</div>

<a data-reveal-id="myModal" data-reveal>Click Me For A Modal</a>

<div ng-view></div>

und das andere geht jetzt auch nciht mehr
<div id="test" class="reveal-modal" data-reveal>
    <h2>adsffadsfasdds. I have it.</h2>
    <p class="lead">Your couch. It is mine.</p>
    <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
    <a class="close-reveal-modal">&#215;</a>
</div>
<div align="center" STYLE="margin-top: 1em">
    <input type="button" data-reveal-id="test" data-reveal class="success button" value="log in.."/>
</div>

aber ich schon noch<a data-reveal-id="myModal" data-reveal>Click Me For A Modal</a>


<script src="js/vendor/jquery.js"></script>
<!--script src="js/foundation.min.js"></script-->
<script src="js/foundation/foundation.js">
</script>
<script src="js/foundation/foundation.reveal.js">
</script>
<script src="js/vendor/fastclick.js"></script>

<script>
    $(document).foundation();
</script>
</body>

</html>
            

         

the partial

<!-- signup ctrl-->
<div id="test" class="reveal-modal" data-reveal>
    <h2>adsffadsfasdds. I have it.</h2>
    <p class="lead">Your couch. It is mine.</p>
    <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
    <a class="close-reveal-modal">&#215;</a>
</div>
<div align="center" STYLE="margin-top: 1em">
    <input type="button" data-reveal-id="test" data-reveal class="success button" value="log in.."/>
</div>
<div class="panel">
    <h5>Signed in?</h5>

    <p>signed in: {{ user != null && 'YES' || 'NO' }} as user: <b>{{ user.username !='test' && 'custom user '+ user.username || 'default user: '+ user.username }}</b></p>
    <p></p>

</div>

<div align="center" STYLE="margin-top: 2em">
    <input type="button" class="large button" value="Scan Issue" ng-click="scan()"/>
</div>
<p>The current status for Issue Key [{{ issueKey }}] is [{{ currentStatus.name }}] with ID [{{ currentStatus.id }}]
</p>

<div>
    <h3>Transition to Status:</h3>
    <ul class="button-group">
        <li ng-repeat="transition in statuses.transitions">
            <a ng-click="makeTransition(transition.id) " class="button">{{ transition.name }}</a>
        </li>
        <li>
            <a class="medium alert button" ng-click="cancel()">Cancel</a>
        </li>
    </ul>
</div>

            

         

the angularjs

var qKanbanMovR = angular.module('qKanbanMovR', ['ngRoute']);

//Set up our site routes
qKanbanMovR.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'templates/signup.html',
                controller: 'SignupController'
            }).
            when('/scan', {
                templateUrl: 'templates/scan.html',
                controller: 'issueMover'
            }).
            otherwise({
                redirectTo: '/'
            });
    }]);

qKanbanMovR.controller('issueMover', ['$scope', '$http',
    function ($scope, $http) {
        "use strict";

        $scope.mockSucc = function () {
            var mockScan = new Array();
            mockScan[0] = "10.100.10.158:8080/browse/SKP-1";
            $scope.success(mockScan);
        }

        $scope.init = function () {

            //nix 
            //$scope.mockSucc();
        }
        $scope.searchIssue = function () {
            var jiraURL, scannedURL, index, issueKey;
            jiraURL = 'xxx';
            $scope.jiraURL = jiraURL;

            //setup default username +pwd
            $scope.user = {};
//            $scope.user = {
//                "username": "testxxx",
//                "pw": "testxxx"
//            };
            $scope.user = {
                "username": "test",
                "pw": "test"
            };

            // get all STATUSES
            $http.defaults.headers.common.Authorization = 'Basic ' + window.btoa($scope.user.username + ':' + $scope.user.pw);
            $http.get(jiraURL + $scope.issueKey + "/transitions").success(function (data) {
                $scope.statuses = data;
            });
            $http.get(jiraURL + $scope.issueKey).success(function (data) {
                $scope.currentStatus = data.fields.status;
            });
        }

        $scope.success = function (resultArray) {
            var index, issueKey;
            index = resultArray[0].lastIndexOf("/");
            issueKey = resultArray[0].substr(index + 1);
            $scope.issueKey = issueKey;
            $scope.searchIssue();
        }

        $scope.failure = function (error) {
            alert("Failed SCAN: " + error);
        }

        $scope.scan = function () {
            $scope.mockSucc();
            // See below for all available options. 
//            cordova.exec($scope.success, $scope.failure, "ScanditSDK", "scan", ["dbHAXJI6EeON21UZUXaxroI/aZczdFhXbk7hktk0mf0",
//                {
//                    "beep": true,
//                    "1DScanning": true,
//                    "2DScanning": true
//            }]);
        }
        $scope.cancel = function () {
            $scope.issueKey = null;
            $scope.currentStatus = null;
            $scope.statuses = null;
        }


        $scope.makeTransition = function (id) {
            var postData;
            postData = '{"transition": {"id": "' + id + '"}}';

            $http({
                url: $scope.jiraURL + $scope.issueKey + "/transitions",
                method: "POST",
                data: postData,
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(function (response) {
                    // success
                    $http.get($scope.jiraURL + $scope.issueKey).success(function (data) {
                        $scope.currentStatus = data.fields.status;
                    });
                },
                function (response) { // optional
                    // failed
                    alert("failed");
                }
            );
        }

    }]);

qKanbanMovR.controller('SignupController', ['$scope',
    function ($scope) {

        $scope.user = {};
        $scope.user = {
            "username": "test",
            "pw": "test"
        };
    }]);

            

         
Juan Ignacio Sánchez Lara over 5 years ago

You should reinitialize foundation at partial controller:

$(document).foundation();