Làm thế nào để ràng buộc dữ liệu trong phần tiêu đề sử dụng angular.js

tôi đang học Angular.js và tôi đặt <title>{{title}}</title> và tôi cố gắng để thay đổi điều đó bằng chọn yếu tốLàm thế nào để ràng buộc dữ liệu trong phần tiêu đề sử dụng angular.js

<select ng-model="user.title"> 
    <option value="Lorem">Lorem</option> 
    <option value="Ipsum">Ipsum</option> 
    <option value="Dolor">Dolor</option> 
</select>

tôi cố gắng ng-change và ng-select với set()

function ctrl($scope) { 
    $scope.title = 'hello'; // this set the title 
    $scope.set = function() { 
     $scope.title = $scope.user.title; // this not 
    }; 
}

Chức năng này không hoạt động, nhưng nó hoạt động khi tôi chỉ đặt nó mà không có chức năng.

Tôi cũng cố gắng tạo ra sự thay đổi chỉ thị:

app.directive('change', function() { 
    console.log('change'); 
    return { 
     link: function(scope, element, attrs) { 
      console.log(arguments); 
      element[0].onChange = function() { 
       scope[attrs[0]](); 
      }; 
     } 
    }; 
});

nhưng điều này quá không làm việc. Console.log không thực thi gì cả.

Nguồn

2013-08-09 jcubic

Kiểm tra phản ứng của CSharp http://stackoverflow.com/a/24921980/243034 Nó sẽ cho phép trang web của bạn được lập chỉ mục đúng và hiển thị trong kết quả tìm kiếm với một mặc định đúng hơn là xuất hiện như {{ứng dụng .title}} (hoặc bất cứ điều gì bạn chọn.) – Calebj

Tất cả những gì nên làm việc tốt mà không có mã thêm:

<html data-ng-app="app"> 
    <head> 
    <title>{{title}}</title> 
    </head> 
    <body> 
    {{title}} 
    <select ng-model="title"> 
     <option value="Lorem">Lorem</option> 
     <option value="Ipsum">Ipsum</option> 
     <option value="Dolor">Dolor</option> 
    </select> 
    </body> 
</html>

Và đó là tất cả. Here is a pen.

Nguồn

2013-08-09 20:57:49 madhead

Không, đó là một chính sách codepen. Nó không hiển thị tiêu đề thực tế khi bút được nạp trong khung nội tuyến (và tiêu đề được thêm vào làm con đầu tiên cho phần thân). Đào nó với các công cụ dev và thấy nó đang thay đổi, hoặc thử ví dụ về yor. (Tôi sử dụng yeoman với máy phát điện góc để kiểm tra nhanh). – madhead

Vì @madhead cung cấp cho bạn câu trả lời tuyệt vời, tôi chỉ muốn giải thích một số câu hỏi về lý do mã của bạn không hoạt động.

Bạn chắc chắn có thể sử dụng ng-change, vui lòng xem mã này. Cách tiếp cận của bạn là rất gần, và tôi đoán có thể bạn đã bỏ lỡ một cái gì đó?

<ul ng-app="myapp" ng-controller="MainCtrl"> 
    <div>{{title}}</div> 
    <select ng-model="user.title" ng-change="set()"> 
     <option value="Lorem">Lorem</option> 
     <option value="Ipsum">Ipsum</option> 
     <option value="Dolor">Dolor</option> 
    </select> 
</ul> 

function MainCtrl($scope) { 
    $scope.set = function() { 
     $scope.title = $scope.user.title; 
    }; 
}

tôi muốn chỉ ra một điều. Nếu bạn kiểm tra trong jsfiddle, không sử dụng <title>{{title}}</title>, sử dụng <div>{{title}}</div> để thay thế. Bằng cách nào đó tiêu đề thẻ sẽ không hiển thị chính xác trong cửa sổ demo.

Demo

Nguồn

2013-08-09 21:35:24 zsong

Tôi có chính xác điều tương tự nhưng tôi đặt ng-app và ng-controller thành đối tượng html. Nếu tôi đặt '$ scope.title' trong trình kiểm soát thay đổi tiêu đề nhưng không phải nếu tôi đặt nó vào một hàm. – jcubic

'ng-app' có thể được đặt trong' ',' ng-controller' sẽ đi với '' Tôi đoán, hãy thử. – zsong

Cả hai kết quả tải jsFiddle và Codepen trong khung nội tuyến, do đó, phần '' không thể được kiểm tra chính xác với các awesomes này. – madhead

Sử dụng $ rootScope

.when('/', { 
    templateUrl: '/templates/page/home.html', 
    controller: ['$scope','$rootScope', function ($scope,$rootScope) { 
     $rootScope.title = 'Учитель24.рф'; 
}]});

Nguồn

2014-03-03 07:31:03

tôi đã tìm ra một giải pháp để thiết lập tiêu đề trong <title> thẻ.

main.js:

app = angular.module('myApp', ['ngRoute']); 
app.config(['$routeProvider', '$locationProvider', function($routeProvider,$locationProvider) { 
    $locationProvider.html5Mode(true); 
    $routeProvider. 
     when("/faq", { 
     controller: "MYCtrl", 
     templateUrl: "../assets/templates/faq.html", 
     title: "FAQ" 
    }); 

}]); 


app.run(['$location', '$rootScope', function($location, $rootScope){ 
    $rootScope.$on("$routeChangeSuccess", function(event, currentRoute, previousRoute) { 
    $rootScope.title = currentRoute.title; 
    }); 
}]);

application.html.erb:

<title ng-bind="'MYAPP - ' + $root.title"></title>

Nguồn

2014-04-11 07:26:47 PythonDev

Khi giao dịch với thẻ tiêu đề, bạn nên sử dụng ng-bind-template vì vậy bạn không thấy biểu hiện trong nó trạng thái thô {{someVar}} trước khi Angular có cơ hội khởi động. Bạn có thể thêm văn bản đầu tiên của tiêu đề trong thẻ tiêu đề và nó sẽ bị ghi đè bởi mẫu của bạn.

<html data-ng-app="app"> 
    <head> 
    <title ng-bind-template="My App - {{title}}">My App - Default Title</title> 
    </head> 
    <body> 
    {{title}} 
    <select ng-model="title"> 
     <option value="Lorem">Lorem</option> 
     <option value="Ipsum">Ipsum</option> 
     <option value="Dolor">Dolor</option> 
    </select> 
    </body> 
</html>

Nguồn

2014-07-23 22:15:36 CSharp

Tôi cũng phải thêm thuộc tính '' vào phần tử 'head' để làm cho nó hoạt động. – PyreneesJim

Làm thế nào để ràng buộc dữ liệu trong phần tiêu đề sử dụng angular.js

Trả lời

Các vấn đề liên quan