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

detect mouse click coordinates within an iframe that spans multiple domains

converting JSON to date format in angular

Decomposing a Vue.js API response into multiple variables

What is the best way to arrange elements based on the numeric value of a data attribute?

Incorporating TypeScript with jQuery for efficient AJAX operations

Developing an interactive input field using JavaScript's Document Object Model (DOM)

Creating a Javascript object from a JSON string

Looking for a solution to toggle the visibility of a div based on whether search results are found or not using JavaScript

Test your knowledge of Javascript with this innerHtml quiz and see

One way to filter using a single array

Extract the URL from an AJAX request within an IFRAME using a Chrome Extension

Exploring the capabilities of an Angular factory

When working with Node.js and Express, I encountered an issue where the req.session object was not defined within

Keeping the Bootstrap popover anchored to the content

Attempting to decode the string prior to selecting an item from the Vue.js/Nuxt array

Having trouble getting a div to slide to the left on hover and collapse on mouseout using Jquery?

Encountering a JS error that states: "Uncaught SyntaxError: missing ) after argument list" when running the following code

jQuery is not updating the div as expected

Accessing a peaceful API and displaying the outcome on a webpage using Node.js

Executing JavaScript with Python in Selenium