nsawarrior.blogg.se - Angularjs code examples

Accessing the parent scope: One could access the parent scope properties and methods from within directive using code such as $scope.$parent.

Take a look at the code to find more about the isolate scope.

Isolating Scope: The directives have got their own scope which, in turn, defines custom properties that could be used to retrieve the data from HTML page.

It also makes it extensible based on the fact that new attribute could be defined to associate additional functionality.

The reason why the directives, iquestion and iscorecard, have been restricted to “Element” is that these are the key directives of this app and are not intended to decorate existing elements. Other possible ways in which directives can be used are attributes (A), comment (M) and class (C). Note that ‘E’ is being used in the directives code. Restrict: With restrict property, the directives have been restricted to be used as element only.The templates are saved in separate files and are accessed in the custom directives using “templateUrl” property. With this, one may not require to touch/update the existing HTML pages having the questions information. The key point to note is that the templating makes the whole thing reusable as an update to the template would update all of the pages using that template. Templating: The custom directives make use of following two templates.Key directives concept demonstrated with quiz appįollowing are key concepts related with directives that got demonstrated in creating the custom directives, iquestion and iscorecard. The right answer is prefixed by “_”.įollowing directive can be used to display the score card: In the text below, the question and answer options is separated by “::” and answer options are separated by “ ”. This attribute is used to gather the question and answer options along with right answer. In the following directive, there is an attribute called as “text”. This is how questions & answers will be written using custom directive, iquestion. iscorecard: This directive display scores for the quiz.iquestion: This directive helps define the questions in the simplest form.To achieve the above objective, following directives were created: I was able to create the two sets of questions in flat 10 minutes.

The objective behind the quiz app is to enable the quiz creators create quick quiz apps by focusing on questions and answers rather than dealing with nitty gritty of web development for creating each app. Introduction to Quiz App & Related Custom Directives

Key directives concept demonstrated with quiz app.

Introduction to Quiz App & Related Custom Directives.

Also see: Jquery Datepicker example code with demo using Jquery UIĪngularjs Simple Datepicker directive example code with Demo