Angularjs expression is not working

Question

I tried to use the angular expression below in html 5 but it is not working.

index.html

* * < !DOCTYPE html >
< html >
< script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" > < /script> < script src = "blockuijs.js" > < /script> < body >
< div ng - app = "icebreakerapp" >
< p > My first expression: {
    {
        5 + 5
    }
} </p> </div> < script >
var module = angular.module('icebreakerapp', ['blockUI']); < /script> < /body> < /html>**










blockuijs.js

(function(angular) {
var blkUI = angular.module('blockUI', []);
blkUI.config(["$provide", "$httpProvider", function($provide, $httpProvider) {
    $provide.decorator('$exceptionHandler', ['$delegate', '$injector', function($delegate, $injector) {
        var blockUI, blockUIConfig;
        return function(exception, cause) {
            blockUIConfig = blockUIConfig || $injector.get('blockUIConfig');
            if (blockUIConfig.resetOnException) {
                blockUI = blockUI || $injector.get('blockUI');
                blockUI.instances.reset();
            }
            $delegate(exception, cause);
        };
    }]);
    $httpProvider.interceptors.push('blockUIHttpInterceptor');
}]);
blkUI.run(["$document", "blockUIConfig", "$templateCache", function($document, blockUIConfig, $templateCache) {
    if (blockUIConfig.autoInjectBodyBlock) {
        $document.find('body').attr('block-ui', 'main');
    }
    if (blockUIConfig.template) {
        blockUIConfig.templateUrl = '$$block-ui-template$$';
        $templateCache.put(blockUIConfig.templateUrl, blockUIConfig.template);
    }
}]);
blkUI.directive('blockUiContainer', ["blockUIConfig", "blockUiContainerLinkFn", function(blockUIConfig, blockUiContainerLinkFn) {
    return {
        scope: true,
        restrict: 'A',
        templateUrl: blockUIConfig.templateUrl,
        compile: function($element) {
            return blockUiContainerLinkFn;
        }
    };
}]).factory('blockUiContainerLinkFn', ["blockUI", "blockUIUtils", function(blockUI, blockUIUtils) {
    return function($scope, $element, $attrs) {
        var srvInstance = $element.inheritedData('block-ui');
        if (!srvInstance) {
            throw new Error('No parent block-ui service instance located.');
        }
        $scope.state = srvInstance.state(); //
    };
}]);
blkUI.directive('blockUi', ["blockUiCompileFn", function(blockUiCompileFn) {
    return {
        scope: true,
        restrict: 'A',
        compile: blockUiCompileFn
    };
}]).factory('blockUiCompileFn', ["blockUiPreLinkFn", function(blockUiPreLinkFn) {
    return function($element, $attrs) {
        $element.append('<div block-ui-container class="block-ui-container"></div>');
        return {
            pre: blockUiPreLinkFn
        };
    };
}]).factory('blockUiPreLinkFn', ["blockUI", "blockUIUtils", "blockUIConfig", function(blockUI, blockUIUtils, blockUIConfig) {
    return function($scope, $element, $attrs) {
        if (!$element.hasClass('block-ui')) {
            $element.addClass(blockUIConfig.cssClass);
        }
        $attrs.$observe('blockUiMessageClass', function(value) {
            $scope.$_blockUiMessageClass = value;
        });
        var instanceId = $attrs.blockUi || '_' + $scope.$id;
        var srvInstance = blockUI.instances.get(instanceId);
        if (instanceId === 'main') {
            var fn = $scope.$on('$viewContentLoaded', function($event) {
                fn();
                $scope.$on('$locationChangeStart', function(event) {
                    if (srvInstance.state().blockCount > 0) {
                        event.preventDefault();
                    }
                });
            });
        } else {
            var parentInstance = $element.inheritedData('block-ui');
            if (parentInstance) {
                srvInstance._parent = parentInstance;
            }
        }
        $scope.$on('$destroy', function() {
            srvInstance.release();
        });
        srvInstance.addRef();
        $scope.$_blockUiState = srvInstance.state();
        $scope.$watch('$_blockUiState.blocking', function(value) {
            $element.attr('aria-busy', !!value);
            $element.toggleClass('block-ui-visible', !!value);
        });
        $scope.$watch('$_blockUiState.blockCount > 0', function(value) {
            $element.toggleClass('block-ui-active', !!value);
        });
        var pattern = $attrs.blockUiPattern;
        if (pattern) {
            var regExp = blockUIUtils.buildRegExp(pattern);
            srvInstance.pattern(regExp);
        }
        $element.data('block-ui', srvInstance);
    };
}]);
blkUI.constant('blockUIConfig', {
    templateUrl: 'angular-block-ui/angular-block-ui.ng.html',
    delay: 250,
    message: "Loading ...",
    autoBlock: true,
    resetOnException: true,
    requestFilter: angular.noop,
    autoInjectBodyBlock: true,
    cssClass: 'block-ui block-ui-anim-fade'
});
blkUI.factory('blockUIHttpInterceptor', ["$q", "$injector", "blockUIConfig", function($q, $injector, blockUIConfig) {
    var blockUI;

    function injectBlockUI() {
        blockUI = blockUI || $injector.get('blockUI');
    }

    function stopBlockUI(config) {
        if (blockUIConfig.autoBlock && !config.$_noBlock && config.$_blocks) {
            injectBlockUI();
            config.$_blocks.stop();
        }
    }

    function error(rejection) {
        stopBlockUI(rejection.config);
        return $q.reject(rejection);
    }
    return {
        request: function(config) {
            if (blockUIConfig.autoBlock) {
                if (blockUIConfig.requestFilter(config) === false) {
                    config.$_noBlock = true;
                } else {
                    injectBlockUI();
                    config.$_blocks = blockUI.instances.locate(config);
                    config.$_blocks.start();
                }
            }
            return config;
        },
        requestError: error,
        response: function(response) {
            stopBlockUI(response.config);
            return response;
        },
        responseError: error
    };
}]);
blkUI.factory('blockUI', ["blockUIConfig", "$timeout", "blockUIUtils", "$document", function(blockUIConfig, $timeout, blockUIUtils, $document) {
    var $body = $document.find('body');

    function BlockUI(id) {
        var self = this;
        var state = {
                id: id,
                blockCount: 0,
                message: blockUIConfig.message,
                blocking: false
            },
            startPromise, doneCallbacks = [];
        this._refs = 0;
        this.start = function(message) {
            if (state.blockCount > 0) {
                message = message || state.message || blockUIConfig.message;
            } else {
                message = message || blockUIConfig.message;
            }
            state.message = message;
            state.blockCount++;
            var $ae = angular.element($document[0].activeElement);
            if ($ae.length && blockUIUtils.isElementInBlockScope($ae, self)) { //
                self._restoreFocus = $ae[0];
                $timeout(function() {
                    if (self._restoreFocus) {
                        self._restoreFocus.blur();
                    }
                });
            }
            if (!startPromise) {
                startPromise = $timeout(function() {
                    startPromise = null;
                    state.blocking = true;
                }, blockUIConfig.delay);
            }
        };
        this._cancelStartTimeout = function() {
            if (startPromise) {
                $timeout.cancel(startPromise);
                startPromise = null;
            }
        };
        this.stop = function() {
            state.blockCount = Math.max(0, --state.blockCount);
            if (state.blockCount === 0) {
                self.reset(true);
            }
        };
        this.message = function(value) {
            state.message = value;
        };
        this.pattern = function(regexp) {
            if (regexp !== undefined) {
                self._pattern = regexp;
            }
            return self._pattern;
        };
        this.reset = function(executeCallbacks) {
            self._cancelStartTimeout();
            state.blockCount = 0;
            state.blocking = false;
            if (self._restoreFocus && (!$document[0].activeElement || $document[0].activeElement === $body[0])) {
                self._restoreFocus.focus();
                self._restoreFocus = null;
            }
            try {
                if (executeCallbacks) {
                    angular.forEach(doneCallbacks, function(cb) {
                        cb();
                    });
                }
            } finally {
                doneCallbacks.length = 0;
            }
        };
        this.done = function(fn) {
            doneCallbacks.push(fn);
        };
        this.state = function() {
            return state;
        };
        this.addRef = function() {
            self._refs += 1;
        };
        this.release = function() {
            if (--self._refs <= 0) {
                mainBlock.instances._destroy(self);
            }
        };
    }
    var instances = [];
    instances.get = function(id) {
        var instance = instances[id];
        if (!instance) {
            instance = instances[id] = new BlockUI(id);
            instances.push(instance);
        }
        return instance;
    };
    instances._destroy = function(idOrInstance) {
        if (angular.isString(idOrInstance)) {
            idOrInstance = instances[idOrInstance];
        }
        if (idOrInstance) {
            idOrInstance.reset();
            delete instances[idOrInstance.state().id];
            var i = instances.length;
            while (--i) {
                if (instances[i] === idOrInstance) {
                    instances.splice(i, 1);
                    break;
                }
            }
        }
    };
    instances.locate = function(request) {
        var result = [];
        blockUIUtils.forEachFnHook(result, 'start');
        blockUIUtils.forEachFnHook(result, 'stop');
        var i = instances.length;
        while (i--) {
            var instance = instances[i];
            var pattern = instance._pattern;
            if (pattern && pattern.test(request.url)) {
                result.push(instance);
            }
        }
        if (result.length === 0) {
            result.push(mainBlock);
        }
        return result;
    };
    blockUIUtils.forEachFnHook(instances, 'reset');
    var mainBlock = instances.get('main');
    mainBlock.addRef();
    mainBlock.instances = instances;
    return mainBlock;
}]);
blkUI.factory('blockUIUtils', function() {
    var $ = angular.element;
    var utils = {
        buildRegExp: function(pattern) {
            var match = pattern.match(/^\/(.*)\/([gim]*)$/),
                regExp;
            if (match) {
                regExp = new RegExp(match[1], match[2]);
            } else {
                throw Error('Incorrect regular expression format: ' + pattern);
            }
            return regExp;
        },
        forEachFn: function(arr, fnName, args) {
            var i = arr.length;
            while (i--) {
                var t = arr[i];
                t[fnName].apply(t, args);
            }
        },
        forEachFnHook: function(arr, fnName) {
            arr[fnName] = function() {
                utils.forEachFn(this, fnName, arguments);
            }
        },
        isElementInBlockScope: function($element, blockScope) {
            var c = $element.inheritedData('block-ui');
            while (c) {
                if (c === blockScope) {
                    return true;
                }
                c = c._parent;
            }
            return false;
        },
        findElement: function($element, predicateFn, traverse) {
            var ret = null;
            if (predicateFn($element)) {
                ret = $element;
            } else {
                var $elements;
                if (traverse) {
                    $elements = $element.parent();
                } else {
                    $elements = $element.children();
                }
                var i = $elements.length;
                while (!ret && i--) {
                    ret = utils.findElement($($elements[i]), predicateFn, traverse);
                }
            }
            return ret;
        }
    };
    return utils;
});


angular.module('blockUI').run(['$templateCache', function($templateCache) {
    $templateCache.put('angular-block-ui/angular-block-ui.ng.html', '<div class=\"block-ui-overlay\"></div><div class=\"block-ui-message-container\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"block-ui-message loading_spinnerlatest\" ng-class=\"$_blockUiMessageClass\">{{ state.message }}</div></div>');
}]);

})(angular); //

It is giving the output as "My first expression:{{ 5+5}}".But expectation is "My first expression:10"

Note: If I remove dependency modules in (angular.module) it is working.But I need those dependency modules for further development

You must include source for all your dependencies too or else Angular is going to throw an error. Check your browser console for errors. — Bidhan
– Bidhan, Commented Aug 4, 2015 at 14:35

Praveen Singh · Accepted Answer · 2015-08-04 14:35:33Z

1

Are you seeing any error in console? Maybe some of your module dependencies are not resolved. Check this snippet:

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="icebreakerapp">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
<script>
var module = angular.module('icebreakerapp', []);
</script>

answered Aug 4, 2015 at 14:35

Praveen Singh

2,5593 gold badges21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

James Over a year ago

I concur you are not including any of the JS srcs for angular.ui which I know will cause an error, you are not including the bootstrap css as well. Your other dependencies need to be resolved as well. I would suggest adding them back in one at a time, doing a google search for what you need to include to resolve them.

Vignesh Packiaraj P Over a year ago

thanks praveen.. i found out the issue is with the blockuijs. But i am not able to resolve it.. please find the details below

Vignesh Packiaraj P Over a year ago

james i have removed all other dependencies and included only blockuijs.js. Please find the details above

Praveen Singh Over a year ago

In the plunkr you added, you have not included ui bootstrap module, I removed that dependency and it worked fine.

Collectives™ on Stack Overflow

Angularjs expression is not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related