แท็ก UI เราเตอร์ไดนามิก ‹title›

ฉันกำลังเพิ่มชื่อให้กับทุกสถานะใน ui-router เช่นนั้น:

.state('projects', {
    url: '/',
    templateUrl: 'projects/projects.html',
    ncyBreadcrumb: {
        label: 'Projects'
    },
    data : {title: 'Projects'}
})

จากนั้นแอตทริบิวต์ title จะใช้ข้อมูลนั้น:

<title ng-bind="$state.current.data.title"></title>

ฉันจะนำข้อมูลจากพารามิเตอร์สถานะและเพิ่มลงในชื่อในตัวอย่างข้างต้นได้อย่างไร ฉันลองสิ่งต่อไปนี้โดยไม่มีโชค:

.state('project', {
    abstract: true,
    url: '/projects/:projId',
    resolve:{
        projId: ['$stateParams', function($stateParams){
            return $stateParams.projId;
        }]
    },
    controller: 'projectCtrl',
    templateUrl: 'project/project.html',
    ncyBreadcrumb: {
        label: 'Project',
        parent: 'projects'
    },
    data : {title: '{{state}}'}
})

angularjs angular-ui-router title
person byteSlayer    schedule 13.05.2015    source แหล่งที่มา

คำตอบ (3)


arrow_upward
2
arrow_downward

คุณต้องใช้ app.run() ในไฟล์ app.js ของคุณและกำหนดชื่อของคุณใน $rootScope.title คุณสามารถทำตามรหัสนี้

app.run(function($rootScope){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState){

        $rootScope.title=toState.data.title;
    });
});

หลังจากนั้นให้ผูกตัวแปรใน html ของคุณเช่นนี้

<title ng-bind="title"></title>

ฉันคิดว่ามันจะเป็นประโยชน์

person Nahid Bin Azhar    schedule 13.05.2015
comment
คุณไม่ได้อธิบายว่าคุณจะตั้งชื่อแบบไดนามิกสำหรับ toState.data.title ได้อย่างไร - person Pankaj Parkar; 13.05.2015
comment
นี่คือเส้นทาง .state('projects', { url: '/', templateUrl: 'projects/projects.html', ncyBreadcrumb: { label: 'Projects' }, data : {title: 'Projects'} }) ดังนั้นจากเส้นทางที่ฉันเพิ่งได้รับชื่อจาก data.title - person Nahid Bin Azhar; 13.05.2015
comment
ใช่ มันเป็นฮาร์ดโค้ดไม่ใช่ไดนามิก เขาถามว่าจะผูกข้อมูลนี้กับ ‹tittle› ได้อย่างไร ฉันแค่แสดงวิธีการทำ - person Nahid Bin Azhar; 13.05.2015
comment
ฉันคิดว่าฉันสับสนเพราะเหตุนี้ {{state}} ซึ่งบ่งบอกถึงไดนามิกสำหรับฉัน - person Pankaj Parkar; 13.05.2015
comment
จริงๆ แล้วเขาไม่ได้อธิบายปัญหาอย่างถูกต้อง :D - person Nahid Bin Azhar; 13.05.2015

arrow_upward
0
arrow_downward

มีตัวอย่างการทำงาน

ฉันจะบอกว่าคุณเกือบจะอยู่ที่นั่นแล้ว ชื่ออาจมีลักษณะดังนี้:

<title>{{$state.current.data.title}} {{$stateParams.ID}}</title>

เรามามีสองสถานะนี้:

  .state('parent', {
      url: "/parent",
      templateUrl: 'tpl.html',
      data : { title: 'Title for PARENT' },
  })
  .state('parent.child', { 
      url: "/child/:ID",
      templateUrl: 'tpl.html',
      controller: 'ChildCtrl',
      data : { title: 'Title for CHILD' },
  })
  ;

และเรียกพวกเขาดังนี้:

<a ui-sref="parent">
<a ui-sref="parent.child({ID:1})">
<a ui-sref="parent.child({ID:2})">

และด้วยตะขอนี้:

.run(['$rootScope', '$state', '$stateParams',
  function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])

ประเด็นก็คือ ใน $rootScope เราสามารถเข้าถึงทั้ง $state.current และ $stateParams

ตรวจสอบได้ที่นี่ (หมายเหตุ หากต้องการดูพลั่วเกอร์ในหน้าต่างแยก ให้คลิกขวา -ไอคอนสีน้ำเงินมุมบน - หน้าต่างใหม่จะเปลี่ยนชื่อด้วย)

person Radim Köhler    schedule 13.05.2015

arrow_upward
0
arrow_downward

ฉันขอแนะนำให้คุณใช้ตัวเลือก params แทนการใช้ตัวเลือก data เนื่องจากพารามิเตอร์สามารถเป็นทางเลือกได้ และคุณสามารถตั้งค่าแบบไดนามิกได้โดยการส่งพารามิเตอร์ภายในคำสั่ง $state.go หรือ ui-sref ของคุณ

รหัส

.state('projects', {
    url: '/',
    templateUrl: 'projects/projects.html',
    ncyBreadcrumb: {
        label: 'Projects'
    },
    params: {
        title: { value: null }
    }
});

จากตัวควบคุม

$state.go('projects', {title: 'Page1'}); //you can change title while calling state

จาก HTML

ui-sref="projects({title: 'Something Else'})"
person Pankaj Parkar    schedule 13.05.2015
comment
@byteSlayer มันช่วยคุณได้ไหม? - person Pankaj Parkar; 14.05.2015