My angular directive is set up like this:
<conversation style="height:300px" type="convo" type-id="{{some_prop}}"></conversation>
I want the directive to automatically refresh when $scope.some_prop changes, so that it displays different content based on the new value.
Even though I tested it, the linking function does not trigger when $scope.some_prop changes. Is there a way to make this work as intended?
It's important to note that the link function is only executed once, so it may not perform as expected in certain scenarios. To achieve the desired behavior, you should utilize Angular's $watch to monitor a specific model variable.
To implement this watch functionality, it must be configured within the link function itself.
In case your directive employs an isolated scope, the scope declaration would look like:
scope :{typeId:'@' }
Inside your link function, you can then add a watch similar to:
link: function(scope, element, attrs) {
scope.$watch("typeId",function(newValue,oldValue) {
//This will be triggered upon data changes.
});
}
If an isolated scope is not being used, consider watching on some_prop.
To effectively monitor the attribute property in a directive, you can utilize the $observe() method like so:
angular.module('myApp').directive('conversation', function() {
return {
restrict: 'E',
replace: true,
compile: function(tElement, attr) {
attr.$observe('typeId', function(data) {
console.log("Updated data ", data);
}, true);
}
};
});
Note that the use of the 'compile' function is chosen here based on the absence of information regarding models and performance considerations.
If models are present, it is advisable to switch from 'compile' to 'link' or implement 'controller'. To track changes in model properties, employ $watch(), ensuring to remove angular {{}} brackets from the property, as shown below:
<conversation style="height:300px" type="convo" type-id="some_prop"></conversation>
For the corresponding directive code:
angular.module('myApp').directive('conversation', function() {
return {
scope: {
typeId: '=',
},
link: function(scope, elm, attr) {
scope.$watch('typeId', function(newValue, oldValue) {
if (newValue !== oldValue) {
// Proceed with your actions here
console.log("I received the new value! ", newValue);
}
}, true);
}
};
});
If you're looking to refresh a directive based on a value change in the parent scope, here's a solution that might meet your needs:
<html>
<head>
<!-- using Angular version 1.4.5 -->
<script src="angular.js"></script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<my-test reload-on="update"></my-test><br>
<button ng-click="update = update+1;">update {{update}}</button>
</body>
<script>
var app = angular.module('app', [])
app.controller('Ctrl', function($scope) {
$scope.update = 0;
});
app.directive('myTest', function() {
return {
restrict: 'AE',
scope: {
reloadOn: '='
},
controller: function($scope) {
$scope.$watch('reloadOn', function(newVal, oldVal) {
// Include directive logic here for reloading
console.log("Directive reloaded successfully......" + $scope.reloadOn);
});
},
template: '<span> {{reloadOn}} </span>'
}
});
</script>
</html>
angular.module('app').directive('converse', function() {
return {
restrict: 'E',
link: function ($scope, $element, $attributes) {
$scope.$watch("specific_property", function (newValue, oldValue) {
var typeIdentifier = $attributes.type-id;
// Implement your own logic here.
});
}
};
}
If your AngularJS version is 1.5.3 or newer, it's recommended to make the switch from directives to components. Components function similarly to directives but come with some handy additional features, like $onChanges(changesObj), a lifecycle hook that triggers when one-way bindings are updated.
app.component('conversation ', {
bindings: {
type: '@',
typeId: '='
},
controller: function() {
this.$onChanges = function(changes) {
// Check if a specific property has changed
// This is important because $onChanges triggers for any property change in the parent controller
if(!!changes.typeId){
refreshYourComponent();
}
};
},
templateUrl: 'conversation .html'
});
For more information on components, refer to the official documentation.
I need help sorting a GeoJSON file based on a property and then slicing it to keep only the top 5 features. For instance, I want to take this GeoJSON and arrange it in descending order by the incidents property: ... [ -75.1972382872565 ...
In my application, I have implemented a WebView to load local html content and then call a JavaScript function to scroll the WebView to a specific position. Here is how I achieve this functionality: public class MyActivity extends Activity { private WebV ...
This code contains a form for creating a new user login. Upon pressing the 'continue' button, it is supposed to call the 'validateForm()' function which checks the values entered in the form. However, even when there are errors such as ...
Even though the loop is executed multiple times in the Node.js program below, why does the control not exit the loop? I made sure to increment the value of i within setTimeout instead of forgetting to do i++ in the for loop. function abc () { for(var ...
In my express application, I have a basic document structure that includes a 'checked_in' flag. Here is the schema for the 'Book' model: module.exports = Book = mongoose.model('Book', new Schema({ name: String, checked_in: ...
Unusual behavior is happening on my website. I have a WCF Data service that provides JSON data to populate a jqGrid using javascript/ajax calls. In addition, there is server-side code that also accesses the same WCF service to retrieve data. Within my WC ...
I am currently extracting data from a different website and have had some success with it. However, I am facing a challenge. After fetching the data, I am required to append it inside a div to accurately extract the necessary information using getElement ...
My issue is quite straightforward. In my application, I have a user list stored in the state which is populated by a database call. Additionally, there is a selected user that gets filled when an element in the user list is clicked. Whenever a userlist e ...
I am facing an issue while trying to set up the AngularJS date picker from this link. I am getting an error message that I don't quite understand. Could it be due to a missing library file or just syntax errors? var myApp = angular.module('myA ...
Having trouble applying the CSS property overflow:hidden to <md-app-content>...</md-app-content>. This is the section of code causing issues: <md-app-content id="main-containter-krishna" md-tag="div"> <Visualiser /> </md-app ...
I am currently working on implementing input field validation on the frontend for IE11 compatibility. It is important that when input validation fails, the user should not be able to navigate away from the input field or interact with other controls on th ...
In my project, I have implemented FullCalendar with background events using the attribute rendering="background". However, I am facing an issue in detecting when a user clicks on these background events. I have tried the following code snippet but it did ...
Currently, I am utilizing ELEMENTREF to interact with the DOM via Renderer2. Allow me to provide a simple example: import { Directive, Renderer2, ElementRef } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export c ...
I’m currently using CDK to develop my serverless application in AWS. However, I encountered an issue where the lambda function fails to import TypeScript modules as JavaScript modules post TS file compilation. As a result, I am encountering a “Module ...
When using: jQuery(MySelector).dragabble( start: function( e, ui ) { } ) In the start function: The start event provides $(this) with the current dragged element from MySelector. How can I loop through each element in MySelector to apply additional code ...
I am currently developing an Angular application and working on creating a dynamic form using Angular. In this project, I am attempting to divide the form into two sections: Person Name and Personal Details. While I have successfully grouped fields for P ...
I am currently working on developing an alarm clock feature using the Date() object. My aim is to have a function trigger when the time from the date object matches the time set by the user. Users set their alarms by selecting a specific time, but I' ...
Initially, the button fails to trigger the jQuery dialog. Upon inspecting the console for errors upon page load, I encounter an "Uncaught TypeError: undefined is not a function" pointing to $("#dialog").dialog({ Below are the code snippets. Default.aspx ...
Within my index.html file, where my React app is located, I have included a CSS stylesheet. Inside this stylesheet are the following CSS properties: #Webshop { background-color: white; height: 100%; width: 100%; } and #Webshop, button ...
I am trying to find a way in typescript to check if the current date is included in a given array of dates. However, even after using the code below, it still returns false even when the current date should be present within the array. Can anyone please pr ...