How do hide/show element of parent view?

Question

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).

http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js look at `$rootScope.$broadcast` . It allows you to send events to any controller. — Pierre Emmanuel Lallemant, Dec 27 '15 at 22:06
Why not expose a method like `hideEditButton()` or `setEditButtonVisible(boolean)` from `ControllerA`? `ControllerB` would have an easy access to this and would not mess up with variables of A's scope. — fracz, Dec 27 '15 at 22:06
I'm not sure that you can access the controllerB methods in controllerA. "child view" isn't clear enough. By inheritence you can, but if it's a ng-controller directive i dont think it would work. — Pierre Emmanuel Lallemant, Dec 27 '15 at 22:08
Doesn't broadcoast only broadcast to child scopes? By "child view", I suppose I mean a child state.. ControllerB (where the user selects the record) within ControllerA (where the buttons are that I want to enable/disable) — Lock, Dec 27 '15 at 22:15
if you broadcoast on $rootScope you broadcoast to ANY active controller, because $rootScope is the root $scope, inherited by all the others. — Pierre Emmanuel Lallemant, Dec 27 '15 at 22:17

score 1 · Answer 1 · answered Dec 27 '15 at 22:29

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.

Thanks! I've created a new question because I can't get the value to update: http://stackoverflow.com/questions/34486059/cant-get-my-service-value-to-update-after-initial-assignment — Lock, Dec 27 '15 at 23:55

score 0 · Answer 2 · answered Dec 27 '15 at 22:38

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
});

How do hide/show element of parent view?

2 Answers2