如何用AngularJS通过类或标签名获取值及canFocus、title属性值？

Hey there! Since you're new to JavaScript and AngularJS, let's walk through how to get the title and canFocus values you're interested in—both the AngularJS "recommended way" (which we suggest prioritizing) and the direct DOM manipulation methods you asked about.

First, a quick key note: AngularJS is built around data-driven development, so ideally you'd access these values directly from your component's scope instead of digging into the DOM. But we'll cover both approaches below to cover your needs.

Let's Start with the Recommended AngularJS Approach #

Since title is bound via ng-model and canFocus is the expression powering the focus-if directive, both values live in your AngularJS scope. In your controller, you can access them directly like this:

angular.module('yourAppName', [])
.controller('YourController', function($scope) {
  // These values would come from your server (e.g., via $http calls)
  $scope.title = "Sample Option Name";
  $scope.canFocus = true;

  // To use these values anywhere in your controller
  console.log("Current title:", $scope.title);
  console.log("Can focus:", $scope.canFocus);
});

In your template, you can even display them directly with Angular's interpolation:

<p>Current Title: {{ title }}</p>
<p>Can Focus: {{ canFocus }}</p>

If You Need to Get Values via DOM (Class/Tag/Event Target) #

If you absolutely need to grab these values from the DOM (e.g., in a vanilla JavaScript event handler), here's how to do it:

1. Getting the title Value #

title is synced with the input's value via ng-model, so you can either grab the input's raw displayed value or pull the actual scope value directly from the element.

Via Class Name

// Get the input element using its class
const inputEl = document.querySelector('.menuTitleField');

// Option 1: Get the input's current displayed value
const titleValue = inputEl.value;

// Option 2: Get the actual AngularJS scope value (matches ng-model)
const scope = angular.element(inputEl).scope();
const scopeTitle = scope.title;

console.log("Title from input value:", titleValue);
console.log("Title from scope:", scopeTitle);

Via Tag Name

Since there might be multiple <input> elements on the page, we'll filter to find the one with your target class:

// Get all input tags, convert to array to use .find()
const allInputs = Array.from(document.getElementsByTagName('input'));
const targetInput = allInputs.find(el => el.classList.contains('menuTitleField'));

if (targetInput) {
  const titleValue = targetInput.value;
  const scope = angular.element(targetInput).scope();
  const scopeTitle = scope.title;
}

Via Event Target ID

First, add an id attribute to your input (your current HTML doesn't have one):

<input id="menuTitleInput" type="text" class="menuTitleField" ...>

Then, in an event handler (like click or input):

function handleInputEvent(event) {
  // Get value directly from the event target
  const titleValue = event.target.value;
  
  // Get the scope value
  const scope = angular.element(event.target).scope();
  const scopeTitle = scope.title;
}

// Attach the handler (example)
document.getElementById('menuTitleInput').addEventListener('input', handleInputEvent);

2. Getting the canFocus Value #

canFocus is a scope variable used in the focus-if directive. To get it, you'll need to access the element's scope after grabbing the DOM element:

Via Class Name

const inputEl = document.querySelector('.menuTitleField');
const scope = angular.element(inputEl).scope();
const canFocusValue = scope.canFocus;

console.log("Can focus value:", canFocusValue);

Via Event Target

function handleInputEvent(event) {
  const scope = angular.element(event.target).scope();
  const canFocusValue = scope.canFocus;
  console.log("Can focus value:", canFocusValue);
}

Quick Reminder #

While DOM manipulation works, it's not the "AngularJS way"—it bypasses the framework's data binding and can lead to hard-to-maintain code. Whenever possible, use the scope directly in your controllers, directives, or templates.

内容的提问来源于stack exchange，提问作者Mike