Proper MVC url when using javascript

When using javascript and performing any redirect or trying to hit any url from javascript, remember to make sure the url will work when deployed to server environments (not just localhost). Use:

Use:

  var url = '@Url.Action("ActionName", "ControllerRootName", new RouteValueDictionary { { "area", "MyArea" } })' ;

OR:

 var url = "@Html.Raw(Url.Action("ActionName", "ControllerRootName", new RouteValueDictionary { { "area", "MyArea" } })  )";

DON’T USE:

var url = "/MyArea/ControllerRootName/ActionName";

AngularJS: Modifying an item in a repeating directive

This is just the directive html so please see the article about Repeating directives for the rest of the code. To modify an item on the fly as the directive is being built you can do it in the Post-compile function as follows:

This is the longer way:

myApp.directive("searchResult3",function(){
    return{
        templateUrl: '/directives/searchresult.html'
        , replace: true      
                           
        , scope:
        {
              personObject: "="  
        }
        , compile: function(elem, attrs){
            
            console.log('Compiling...'); 
            console.log(elem.html);
            //elem.removeAttr('class'); // I can remove a class here
            return{
                pre: function(scope,elements,attrs){
                    console.log('Pre-linking...');
                    console.log(elements);
                    //NOT safe to change item here. You can leave this pre section out
                },
                
                post: function(scope,elements, attrs){ //scope = model, elements = view
                    console.log('Post-linking...');
                    console.log(scope);
                    console.log(elements);
                    
                    //I could also change an item in the loop here.
                    if(scope.personObject.name === 'Jane Doe')
                    {
                        elements.removeAttr('style');
                    }
                }
                
            };
        }
        
    }
});

This is the short-hand:

myApp.directive("searchResult3",function(){
    return{
        templateUrl: '/directives/searchresult.html'
        , replace: true      
                           
        , scope:
        {
              personObject: "="  
        }
        ,   
        link: function(scope,elements, attrs){ //scope = model, elements = view
                    console.log('Post-linking...');
                    console.log(scope);
                    console.log(elements);
                    
                    //I could also change an item in the loop here.
                    if(scope.personObject.name === 'Jane Doe')
                    {
                        elements.removeAttr('style');
                    }
                }
        
    }
});


AngularJS: Repeating directive

This example shows how to create a custom directive (custom html tag that represents a section of html), and then inject a list that will be repeated and will display the directive once for each item in the list. This can be used to show rows of data in a grid or a menu, etc. This is a very basic example. Imagine using http.get to get data from your API, and that you would inject it into a more polished template html.

Controller code:

//controller with a list that will use repeating directive to display
myApp.controller('repeatingDirectiveController',['$scope', function($scope){
    
     $scope.people = [
         { name: 'John Doe' , address:'123 Main St., Greensboro, NC'},
         { name: 'Jane Doe', address:'456 Blue St., Greensboro, NC'},
         { name: 'Gorge Smith', address:'789 Greene St., Greensboro, NC'}
         ];
}]);

Template HTML:


Page (view) HTML:

<h1>{{pageName}}</h1>
<!-- people is a json list in the controller. We get a person and pass it into the
     searchResult directive -->
<search-result-3 person-object="person" ng-repeat="person in people"></search-result-3>  

This shows a list of 3 items defined in the controller.

AngularJS: Passing a reference to a controller function into a directive

// A directive with access to a function named ‘addressFunction(person)’ that takes a person object
// which exists in the CONTROLLER (*note that I don’t have to name the parameter ‘person’ when
// calling it so I’m doing ‘aperson’ just to prove that.
// you would load this with <search-result-3 person-object=”{{person}}” formatted-address-function=”addressFunction(aperson)”></search-result-3>

/*
<a href=”#” class=”list-group-item”>
<h4 class=”list-group-item-heading”>{{personObject.name}}</h4>
<p class=”list-group-item-text”>{{formattedAddressFunction(aperson: personObject)}}</p>
</a>
*/
myApp.directive(“searchResult3”,function(){
return{
templateUrl: ‘directives/searchResult.html’
, replace: true //will replace the original tag
//rather than putting this html inside existing tag
, scope:
{
personObject: “=” //tells us the directive expects a passed in value
// the = sign means this will be an object reference.
, formattedAddressFunction = “&” //a function is being passed in
}

}
});

AngularJS: Passing a reference into a directive


/ A directive with its own TWO WAY BINDING object passed in. This
// will allow the original item to be changed so it is more dangerous than using '@'
// modify parent's scope values
// you would load this with <search-result-3 person-object="{{person}}" </search-result-3

/*
 <a href="#"  class="list-group-item">
    <h4 class="list-group-item-heading">{{personObject.name}}</h4>
    <p class="list-group-item-text">{{personObject.address}}</p>
</a>
*/
myApp.directive("searchResult3",function(){
    return{
        templateUrl: 'directives/searchResult.html'
        , replace: true     //will replace the original tag 
                            //rather than putting this html inside existing tag
        , scope:
        {
            personObject: "="   //tells us the directive expects a passed in value
                                // the = sign means this will be an object reference.
            
        }
        
    }
});



Angular Isolated Scopes

// A directive with its own ISOLATED SCOPE. This way the directive doesn't accidentally 
// modify parent's scope values
// you would load this with <search-result-3 person-name="{{person.name}}" person-address="{{person.address}}"></search-result-3

/*
 <a href="#"  class="list-group-item">
    <h4 class="list-group-item-heading">{{personName}}</h4>
    <p class="list-group-item-text">{{personAddress}}</p>
</a>
*/
myApp.directive("searchResult3",function(){
    return{
        templateUrl: 'directives/searchResult.html'
        , replace: true     //will replace the original tag 
                            //rather than putting this html inside existing tag
        , scope:
        {
            personName: "@"   //tells us the directive expects a passed in value
                                // the @ sign means this will be text
            , personAddress: "@"
        }
        
    }
});

Angular Custom Directive

If you want to create a new re-usable tag, then you want to create a directive. Here is a sample directive:

//directives
// name it what will show as 'search-result' in html
// now you can put <search-result></search-result> (or <div search-result></div> in the html 
myApp.directive("searchResult",function(){
    return{
        template: '<a href="#"  class="list-group-item><h4 class="list-group-item-heading">Doe,John</h4><p class="list-group-item-text">555 Main St., New York, NY 11111</p></a>'
        , replace: true     //will replace the original tag 
                            //rather than putting this html inside existing tag
        
    }
});