Is it necessary to also include template-only attributes in my controller's definition?

I'm working on a directive template that features a basic toggle variable.

<div ng-mouseenter="$ctrl.myToggle = true" ng-mouseleave="$ctrl.myToggle = false">
...
</div>
<div ng-if="$ctrl.myToggle">
... toggled content
</div>

Currently, I am using TypeScript to write my controllers.

Should I include myToggle in my controller class even though it won't be actively used? (I don't require a toggle function since this attribute is the only thing that needs to change)

export MyController {

  public myToggle:boolean = false;

  construtctor(){
    //...
  }

  //...
}

Do you think it’s not advisable to have such logic solely in the template?

Answer №1

In Angular 2, a controller and a template (view) combine to form a single entity known as a directive/component. The evolution of this concept has led to controller classes being referred to as directive/component classes.

It is considered correct to designate property visibility as private when it is intended to be used only by the component itself.

While the absence of a getter/setter method like toggle() may be viewed as a poor practice in some scenarios for the sake of encapsulation and testability, having a toggle property serves the same function in this particular case.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Insert an HTML page into a div element

I am having an issue with my angular template. I have a div where I am attempting to load an HTML view file (.html) based on a $watch event, but for some reason, the HTML view is not being loaded into the div. Below is a snippet of my controller code that ...

Angular 8 Refresh Token Implementation

I am currently working on an Angular 8 app that is integrated with .NET Core. My goal is to find a way to refresh a JWT token within the application. Within the integration, users are able to validate and receive a token which expires after 30 minutes. T ...

Putting AngularJS Directives to the Test with Jest

There seems to be a crucial element missing in my overly simplified angular directive unit test. The directive code looks like this: import * as angular from 'angular' import 'angular-mocks' const app = angular.module('my-app&apo ...

Is the relevance of Angular 1.x still prevalent in today's development landscape

Considering I have several projects in angular 1.x, I'm contemplating whether it's truly essential and efficient to upgrade them to angular 4 or a later version. The smaller dashboards do not necessarily require an update since they are only use ...

Having trouble generating a bin executable for my npm package

Referencing: https://docs.npmjs.com/cli/v10/configuring-npm/package-json#bin I am attempting to generate a "binary" for my npm package. The structure of my package.json is as follows: { "name": "@internal/my-exe", "version": "0.0.0", "type": "commo ...

Encountering a Problem with HTTP Requests in Angular 2

Seeking assistance with a technical issue. My objective: Make a REST API call to retrieve JSON data and resolve an Angular 2 promise. ServerAPI built with Node.js/ExpressJS/Lodash Sample of server.js file: var express = require('express'); va ...

Transferring dynamic parameters from a hook to setInterval()

I have a hook that tracks a slider. When the user clicks a button, the initial slider value is passed to my setInterval function to execute start() every second. I want the updated sliderValue to be passed as a parameter to update while setInterval() is r ...

Navigating between child and parent states in Angular UI Router can sometimes create issues with resolving parent data when the child transitions back

One issue I am encountering is that after submitting content within my modal in ui route dashboard.addTask, I want ui-router to redirect me back to the dashboard and refresh the controller along with re-resolving tasks. Although I can successfully refresh ...

Tips for incorporating personalized form and input directives in AngularJS while addressing issues with transcluded scope

Over the last few days, I attempted to implement something along these lines: %myform(name='somename' ng-controller='whatever') %myinput(ng-model='user.firstName' ... The controller has a user structure with firstName, l ...

Tips for maintaining the data on a page continuously updating in AngularJS

I have this code snippet: $cookieStore.put('profileData', $scope.profileData); var profileData = $cookieStore.get('profileData'); $scope.init = function(){ var profileData = $cookieStore.get('pr ...

Customizing the HTMLElement class to modify particular attributes

Is there a way to modify the behavior of an HTMLElement's scrollTop property by adding some extra logic before updating the actual value? The common approach seems to be deleting the original property and using Object.defineProperty(): delete element. ...

Retrieving the NorthEast and SouthWest regions with AngularJS

Check out my code on the fiddle page linked below. I am having trouble with the South West and North East coordinates for the map and markers. View the code fiddle here I attempted to solve this issue, but it did not work as expected. var bounds = map ...

What is the best way to display ng-repeat elements in a horizontal layout

Looking for a way to display thumbnails horizontally using ng-repeat in AngularJS and Bootstrap. Any ideas on how to achieve this with CSS or Bootstrap? <div class="row"> <ul class="col-md-4" id="phones"> <li class="thumbnail" ...

Troubleshooting the issue of conditional extension in Typescript for "Array or Object" not functioning as anticipated

My goal is to create a TypeScript type generic that has the following structure: type APIDataShape<T extends { id: unknown } | Array<{ id: unknown }>> = T extends Array<any> ? Array<{ id: T[number]["id"]; ...

Enhancing AngularJs code effectiveness through the use of MVC framework

I'm completely new to AngularJs and still trying to grasp the concepts. I have a few questions that I hope someone can help me with: Is it possible to trigger code in the controller only when a button is clicked, rather than having it load with the ...

What is my strategy for testing a middleware that accepts arguments?

Here is the middleware I am working with: function verifyKeys(expectedKeys: string[], req: Request): boolean{ if (expectedKeys.length !== Object.keys(req.body).length) return false; for (const key of expectedKeys) { if (!(key in req.body)) return ...

Accessing NgModel as a number in the Kendo DropDownList

Is it possible to have values of number type in my ngModel when using KendoDropDownList with items containing Id (number) and Name (string) in the datasource? Here is an example for reference: ...

Dynamically assign values to object properties of varying data types using indexing

My goal is to dynamically update one object using another object of the same type. This object contains properties of different types: type TypeOne = 'good' | 'okay'; type TypeTwo = 'default' | 'one'; interface Opt ...

Loop through with <li> inside a <td> tag

I need help figuring out how to place a list of items inside a table row using ng-repeat in AngularJS. Here is my attempted code: <td> <div ng-repeat="x in total.count"> ...

When in development mode, opt for the unminified version of the library in Web

My TypeScript project utilizes a forked version of the apexcharts npm package. When building the project with webpack in development mode, I want to use the unminified version of the apex charts library. However, for production, I prefer to stick with the ...