CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Lock
Lock

Reputation: 5522

How do hide/show element of parent view?

I'm having trouble with the design pattern of a form I have in Angularjs using ui-ruoter.

I have a parent template which has some buttons, such as 'edit' and 'delete'. I then inside this parent have a child view which has a listing table of data as well as some other child views with tabs of data.

Upon selecting a row on this table, I want the parent view to either show or hide the 'edit' and 'delete' buttons.

I am currently using $state.params.action to pass around what crud action is the user is doing (such as new, edit or delete) and also $state.params.id to pass the id of the record they are editing.

How can I use ng-show/ng-hide to hide these? Bear in mind that the buttons I want to hide are in ControllerA, but I want to be able to hide/show them from ControllerB (which is a child view of ControllerA).

Upvotes: 1

Views: 215

Answers (2)

Sina Gh
Sina Gh

Reputation: 598

You can emit an event from your child controller when you want something done in parent controller as follows:

$scope.$emit("someEvent", {exampleJsonData: exampleJsonValue});

and catch any emitted/broadcasted event in your parent controller as follows:

$scope.$on("someEvent", function(event, args){
//do stuff
});

Upvotes: 0

Matt Way
Matt Way

Reputation: 33151

When creating angular controllers you should try to keep them as thin as possible by simply binding their scopes to services which actually take care of the state.

So in your example you could have a service that takes care of managing the state of the currently selected data (not exactly sure of your setup).

For example:

.service('SomeState', function(){

    var state = {
        showEdit: true,
        showDelete: false
    };

    this.getState = function(){
        return state;
    };
});

.controller('ParentCtrl', function($scope, SomeState){
    // bind the service to the parent controller scope
    // so you can use something like ng-show="state.showEdit" on your buttons
    $scope.state = SomeState.getState();
});

.controller('ChildCtrl', function($scope, SomeState){
    // here you can alter the state (this example is directly, but you could also use interface functions on your service)
    var state = SomeState.getState();
    state.showEdit = false;
});

The idea here is to keep your intentions modular, and simply have controllers consume these modular services to which they interact with.

Upvotes: 1

Related Questions