Is it possible to alter the parent scope from an AngularJS directive?

Question

Is it possible to alter the parent scope from an AngularJS directive?

I am currently in the process of constructing my initial Angular application, but I am encountering some difficulties while attempting to achieve a specific functionality. The issue revolves around a video container which is supposed to remain hidden until $scope.video.show = true; I aim to alter this value upon clicking on a particular link by implementing it within a directive. Any assistance or guidance in this matter would be greatly appreciated.

html:

<div ng-controller="AppCtrl">
    <div ng-cloak 
         ng-class="{'show':video.show, 'hide':!video.show}">
                  // youtube iframe content, for example
    </div>

    <div>
        <ul>
            <li>
                <h3>Video Headline 1</h3>
                <button type="button" 
                    video-show 
                    data-video-id="jR4lLJu_-wE">PLAY NOW&nbsp;&rang;</button>
            </li>
            <li>
                <h3>Video Headline 2</h3>
                <button type="button" 
                    video-show 
                    data-video-id="sd0f9as8df7">PLAY NOW&nbsp;&rang;</button>
            </li>
        </ul>
    </div>
</div>

Javascript:

var angularApp = angular.module("savings-video", [])
.controller('SavingsVideoController', function($scope) {

    $scope.video = {
        show : false,
        videoId : ""
    };
};

angularApp.directive("videoShow", function(){
    return{
        restrict: 'A',
        link: function(scope , element){

            element.bind("click", function(e){

                var $selectedElement = angular.element(element);
                $selectedElement.closest('li').siblings().addClass('hide');   // hide the other one
                $selectedElement.closest('li').removeClass('hide');           // keep me open

                scope.video.show = true;  // struggling to make it work
                     // what is the optimal approach to accomplish this?

            });
        }
    }
});

javascript angularjs

Answer 1

Answer №1

There are several ways you can enhance your code.

Consider exploring ngShow/ngHide and ngIf; they offer a more straightforward toggle functionality compared to manual implementation.
Adopt an Angular mindset. Instead of manipulating the DOM directly, define your rules using angular directives for easier management.

For instance, consider implementing it this way:

<div ng-controller="AppCtrl">
    <div ng-cloak ng-show='video.show">
              // youtube iframe content, for example
    </div>

    <div>
        <ul ng-switch="video.videoId">
            <my-video my-video-id="jR4ABCD" my-headline="Video Headline 1" ng-switch-when="myVideoId" my-video-manager="video" />
            <my-video my-video-id="al1jd89" my-headline="Video Headline 2" ng-switch-when="myVideoId" my-video-manager="video"/>
        </ul>
    </div>
</div>

In this updated version, the iframe is conditionally displayed using ngShow, and ngSwitch controls which video appears based on $scope's video.videoId. Additionally, the list items have been transformed into a directive called my-video.

thisViewModel.directive("my-video", function(){
    return{
        restrict: 'E',
        replace: true,
        scope: {
           myVideoId = "=",
           myHeadline = "=",
           myVideoManager = "="
        },
        template = '<li><h3>{{myHeadline}}</h3><button type="button" ng-click="play()">PLAY NOW&nbsp;&rang;</button></li>',
        link: function(scope , element){
            scope.play = function(){
                 myVideoManager.show = true;
                /*whatever you want here, using scope.myVideoId*/
            }
        }
    }
});

This directive achieves the same result as the original HTML but within the angular framework, simplifying access to the desired properties. By leveraging angular directives, the need for manual UI logic is eliminated, resulting in cleaner HTML and JavaScript. While there is room for further optimization, this approach aligns better with best practices.

It may take some time to master, but referring to the guidelines provided in the linked Stack Overflow post can be beneficial.

UPDATE

I overlooked a requirement previously. If you want both videos to display when none is selected, avoid using ng-switch and opt for manual ng-show declarations instead.

<div>
        <ul>
            <my-video my-video-id="jR4ABCD" my-headline="Video Headline 1" ng-show="myVideoId == video.videoId" my-video-manager="video" />
            <my-video my-video-id="al1jd89" my-headline="Video Headline 2" ng-show="myVideoId == video.videoId" my-video-manager="video"/>
        </ul>
    </div>

Since ng-switch essentially equates to ng-show, the logic transitioned to the ng-show attribute in this scenario.

Moreover, if you have a collection of videos, explore ng-repeat for automatic repetition of the video tag instead of manual duplication.

<ul>
   <my-video ng-repeat='aVideo in myVideoArray' my-video-id='aVideo.videoId' my-headline...(and so on)>
</ul>

Answer 2

There are several ways you can enhance your code.

Consider exploring ngShow/ngHide and ngIf; they offer a more straightforward toggle functionality compared to manual implementation.
Adopt an Angular mindset. Instead of manipulating the DOM directly, define your rules using angular directives for easier management.

For instance, consider implementing it this way:

<div ng-controller="AppCtrl">
    <div ng-cloak ng-show='video.show">
              // youtube iframe content, for example
    </div>

    <div>
        <ul ng-switch="video.videoId">
            <my-video my-video-id="jR4ABCD" my-headline="Video Headline 1" ng-switch-when="myVideoId" my-video-manager="video" />
            <my-video my-video-id="al1jd89" my-headline="Video Headline 2" ng-switch-when="myVideoId" my-video-manager="video"/>
        </ul>
    </div>
</div>

In this updated version, the iframe is conditionally displayed using ngShow, and ngSwitch controls which video appears based on $scope's video.videoId. Additionally, the list items have been transformed into a directive called my-video.

thisViewModel.directive("my-video", function(){
    return{
        restrict: 'E',
        replace: true,
        scope: {
           myVideoId = "=",
           myHeadline = "=",
           myVideoManager = "="
        },
        template = '<li><h3>{{myHeadline}}</h3><button type="button" ng-click="play()">PLAY NOW&nbsp;&rang;</button></li>',
        link: function(scope , element){
            scope.play = function(){
                 myVideoManager.show = true;
                /*whatever you want here, using scope.myVideoId*/
            }
        }
    }
});

This directive achieves the same result as the original HTML but within the angular framework, simplifying access to the desired properties. By leveraging angular directives, the need for manual UI logic is eliminated, resulting in cleaner HTML and JavaScript. While there is room for further optimization, this approach aligns better with best practices.

It may take some time to master, but referring to the guidelines provided in the linked Stack Overflow post can be beneficial.

UPDATE

I overlooked a requirement previously. If you want both videos to display when none is selected, avoid using ng-switch and opt for manual ng-show declarations instead.

<div>
        <ul>
            <my-video my-video-id="jR4ABCD" my-headline="Video Headline 1" ng-show="myVideoId == video.videoId" my-video-manager="video" />
            <my-video my-video-id="al1jd89" my-headline="Video Headline 2" ng-show="myVideoId == video.videoId" my-video-manager="video"/>
        </ul>
    </div>

Since ng-switch essentially equates to ng-show, the logic transitioned to the ng-show attribute in this scenario.

Moreover, if you have a collection of videos, explore ng-repeat for automatic repetition of the video tag instead of manual duplication.

<ul>
   <my-video ng-repeat='aVideo in myVideoArray' my-video-id='aVideo.videoId' my-headline...(and so on)>
</ul>

Answer 3

Answer №2

It seems like there is an issue with the controller names not matching up in your code. Consider updating AppCtrl to SavingsVideoController to resolve this discrepancy.

Answer 4

It seems like there is an issue with the controller names not matching up in your code. Consider updating AppCtrl to SavingsVideoController to resolve this discrepancy.

Answer 5

Answer №3

You simply require a straightforward solution.

HTML

<div ng-controller="AppCtrl">
    <div ng-cloak ng-show="view.show">
        <!-- Using ng-show is more convenient -->
    </div>

    <div>
        <ul>
            <li>
                <h3>Video Headline 1</h3>
                <button type="button" 
                    ng-click="view.show = true"
                    data-video-id="jR4lLJu_-wE">PLAY NOW&nbsp;&rang;</button>
                    <!-- Extra directive not required to change view.show -->
            </li>
            <li>
                <h3>Video Headline 2</h3>
                <button type="button" 
                    ng-click="view.show = true"
                    data-video-id="sd0f9as8df7">PLAY NOW&nbsp;&rang;</button>
            </li>
        </ul>
    </div>
</div>

JS

var thisViewModel = angular.module("savings-video", [])
.controller('SavingsVideoController', function($scope) {

    $scope.video = {
        show : false,
        videoId : ""
    };
};

// No need for creating another directive

Answer 6

You simply require a straightforward solution.

HTML

<div ng-controller="AppCtrl">
    <div ng-cloak ng-show="view.show">
        <!-- Using ng-show is more convenient -->
    </div>

    <div>
        <ul>
            <li>
                <h3>Video Headline 1</h3>
                <button type="button" 
                    ng-click="view.show = true"
                    data-video-id="jR4lLJu_-wE">PLAY NOW&nbsp;&rang;</button>
                    <!-- Extra directive not required to change view.show -->
            </li>
            <li>
                <h3>Video Headline 2</h3>
                <button type="button" 
                    ng-click="view.show = true"
                    data-video-id="sd0f9as8df7">PLAY NOW&nbsp;&rang;</button>
            </li>
        </ul>
    </div>
</div>

JS

var thisViewModel = angular.module("savings-video", [])
.controller('SavingsVideoController', function($scope) {

    $scope.video = {
        show : false,
        videoId : ""
    };
};

// No need for creating another directive

Is it possible to alter the parent scope from an AngularJS directive?

Answer №1

Answer №2

Answer №3

Similar questions

Leveraging ng-change in AngularJS when utilizing the "Controller As" syntax

Showcase pictures from a directory in real-time using a combination of jQuery and Bootstrap as the folder continues to fill up with images

Tips for implementing code to function across several images in HTML and CSS

Adjust the width of a container to exceed 32767 using jquery in the Opera browser

Synchronizing timers among different elements

Tips for enabling the background div to scroll while the modal is being displayed

How to eliminate all <style> tags across the board using Regex in JavaScript

The issue with the <Button> component not properly linking in next.js

Unable to input text using Python Selenium in a textbox

"Complete with Style: Expand Your Horizons with Material-UI

What factors cause variations in script behavior related to the DOM across different browsers?

Can you explain the significance of this code snippet 'true <=> false'?

What is the best way to send data from ajax to a django view?

SapUI5: Implementing a toggle functionality to display/hide one list item based on another list item's action

Combining the power of MobileServiceClient and AngularJS for seamless integration

Finding a potential data breach in Node.js, MongoDB, and Chrome, exposed passwords are

``There seems to be a problem with the ngb time picker when using the up and

Retrieve the encrypted URL

What is the reason for the countdown number's color remaining the same even after it reaches a specific time threshold?

Looking to transform a nested JSON structure into a visually appealing HTML table with merged rows?